как загрузить iframe в div с помощью ajax

Question

Я хочу загрузить iframe в мой div с помощью ajax. как это сделать?

<button id="iframeload">Load Iframe</button>
<div id="iframe_content"></div>

<script type="text/javascript">
  $('.iframeload').click(function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    $.ajax({
        type: "POST", 
        url : "https://pecom.ru/ru/calc/?iframe=Y",
        success : function (data) {  
            // alert('ok');
            $("#iframe_content").html(data); 
        }
    });
});

этот iframe

кнопка #iframeload не работает ...

Answer 1

Я думаю, что приведенный ниже код поможет вам. Вам нужно изменить

$ ( 'iframeload') к $ ( '# Iframeload') потому что вы используете идентификатор элемента, а не класс

полный код ниже

 $('#iframeload').click(function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    $.ajax({
        type: "POST", 
        url : "https://pecom.ru/ru/calc/?iframe=Y",
        success : function (data) {  
            // alert('ok');
            $("#iframe_content").html(data); 
        }
    });
   });

  

 <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <button id="iframeload">Load Iframe</button>
    <div id="iframe_content"></div>

Приведенный выше код не работает из-за API

Answer 2

Первая ошибка

Вы используете класс элементов, а не его идентификатор в вашем коде:

<button id="iframeload">
$('.iframeload').click(function(event) {

Вторая ошибка

Похоже, вы хотите, чтобы ваш вызов ajax не совпадал с вашей страницей. Поэтому браузер блокирует его, так как он обычно позволяет запрос в том же источнике по соображениям безопасности.

Возможное решение

Однако, если вы просто хотите отображать содержимое iframe при нажатии кнопки, ajax не нужен.

просто используйте attr('scr',url)

$( document ).ready(function() {

  $('#iframeload').on('click',function(event){
    event.preventDefault();
    event.stopImmediatePropagation();
    
    var url = 'https://pecom.ru/ru/calc/?iframe=Y';
    
    $('#abc_frame').attr('src', url);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button id="iframeload">Load Iframe</button>
<div id="iframe_content">
  <iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>
</div>