如何通过 AJAX 在 div 中加载 iFrame
Posted
技术标签:
【中文标题】如何通过 AJAX 在 div 中加载 iFrame【英文标题】：How to load iFrame in div by AJAX 【发布时间】：2018-12-12 20:15:59 【问题描述】：我想通过 AJAX 在我的 div 中加载一个 iFrame。我该怎么做？
<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>
这是 iFrame
<iframe id="pecom-kabinet-iframe" allowtransparency="true" frameborder="0" scrolling="auto" style="border: 0;" src="https://pecom.ru/ru/calc/?iframe=Y">Not supported browser< / iframe >
并且按钮#iframeload 不起作用...
【问题讨论】：
为什么是 iframe？你能不能不使用 div 而只是将响应附加到那个？ 【参考方案1】：第一个错误
您使用的是元素类，而不是代码中的 id：
<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>【讨论】：
【参考方案2】：我认为下面的代码可以帮助你。你需要改变
$('.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 的原因不能工作
【讨论】：
【参考方案3】：<!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" ></iframe>
</body>
</html>
【讨论】：
以上是关于如何通过 AJAX 在 div 中加载 iFrame的主要内容，如果未能解决你的问题，请参考以下文章
如何在按钮单击事件中的模式弹出扩展器中的iframe中加载页面？
如何在使用“react-frame-component”库创建的 IFrame 中加载 webpack 提供的 css？