如何通过ajax在div中加载iframe

我想通过ajax在我的div中加载iframe . 怎么做?

<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 <iframe id =“pecom-kabinet-iframe”allowtransparency =“true”frameborder =“0”width =“800”height =“1800”scrolling =“auto”style =“border:0;” src =“https://pecom.ru/ru/calc/?iframe=Y”>不支持浏览器</ iframe>

按钮#iframeload不起作用......

回答(2)

2 years ago

First Error

您正在使用元素类,而不是代码中的id:

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

Second Error

看起来您希望将ajax调用到与您的页面不同的域 . 因此浏览器会阻止它,因为出于安全原因,它通常允许同一来源的请求 .

Possible Solution

但是,如果您只想在按钮单击时显示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>

2 years ago

我认为以下代码可以帮助您 . 你需要改变

$(' . iframeload')到$('#iframeload')因为你使用的是元素ID而不是类

完整的代码如下

$('#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,上述代码无效