如何通过 AJAX 在 div 中加载 iFrame

Question

I want load an iFrame in my div by AJAX.我想通过 AJAX 在我的div加载一个 iFrame。 How can I do it?我该怎么做？

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

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<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); 
          }
      });
  });
</script>

This is the iFrame这是 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">Not supported browser< / iframe >

ANd the button #iframeload does not work...并且按钮#iframeload不起作用...

Answer 1

First Error第一个错误

You are using elements class, not it's id in your code:您正在使用元素类，而不是代码中的 id：

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

Second Error第二个错误

Looks like you want your ajax call to a different domain than your page is on.看起来您希望 ajax 调用与您的页面所在的域不同。 So the browser is blocking it as it usually allows a request in the same origin for security reasons.因此浏览器会阻止它，因为出于安全原因，它通常允许来自同一来源的请求。

Possible Solution可能的解决方案

However, if you just want to display the iframe content on button click, there is no need for ajax.但是，如果您只想在单击按钮时显示 iframe 内容，则不需要 ajax。

just use attr('scr',url)只需使用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>

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('#iframe').attr('src', 'https://www.qries.com');
});
</script>
</head>
<body>

<iframe id="iframe" name="myIframe" frameborder="5" width="500" height="300"></iframe>

</body>
</html>

Answer 3

I think the below code helps you.我认为下面的代码可以帮助你。 You need to change你需要改变

$('.iframeload') To $('#iframeload') because you're using element ID not class $('.iframeload') 到 $('#iframeload') 因为您使用的是元素 ID 而不是类

the complete code is below完整的代码如下

 $('#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>

The above code does not work because of the API由于API，上面的代码不起作用

如何通过 AJAX 在 div 中加载 iFrame

问题描述

3 个解决方案

解决方案1
1 2018-07-04 11:55:57

解决方案2
1 2021-01-29 11:16:36

解决方案3
0 2018-07-04 12:05:19

如何通过 AJAX 在 div 中加载 iFrame

问题描述

3 个解决方案

解决方案1 1 2018-07-04 11:55:57

解决方案2 1 2021-01-29 11:16:36

解决方案3 0 2018-07-04 12:05:19

解决方案1
1 2018-07-04 11:55:57

解决方案2
1 2021-01-29 11:16:36

解决方案3
0 2018-07-04 12:05:19