在前端开发中，我们经常需要将不同源的内容嵌入到网页中，这时候就可以使用iframe标签。而利用jQuery动态插入iframe则是一种更加灵活和方便的方式。
准备工作
在开始动态插入iframe之前，我们需要先了解以下几个概念：
1. 同源策略
同源策略是浏览器的一项安全措施，它阻止页面加载或操作来自不同源的资源。具体来说，只有当协议、域名、端口三者都相同时才算是同源，否则就是不同源。
2. iframe标签
iframe（inline frame）标签可以嵌入不同源的HTML文档，同时也可以在其中运行Javascript代码。注意，由于同源策略的限制，嵌入的文档必须与父页面同源或开启跨域访问。
3. jQuery
jQuery是一个轻量级Javascript库，提供了各种简化DOM操作、事件处理、Ajax调用等常用功能的方法。
动态插入iframe
通过jQuery动态插入iframe主要分为以下几个步骤：
1. 创建iframe元素
首先，我们需要使用jQuery创建一个iframe元素，代码如下：
var $iframe = $('<iframe>');2. 设置iframe属性
然后，我们可以设置iframe的各种属性，例如宽高、src地址等。如果需要嵌入不同源的内容，则需要开启跨域访问，代码如下：
$iframe.attr({
width: '100%',
height: '400',
src: 'http://www.example.com',
frameborder: '0',
allowfullscreen: true,
sandbox: 'allow-scripts'
});其中，sandbox属性是一个安全特性，可以限制iframe中的Javascript代码执行范围。
3. 插入到父元素中
最后，我们需要将创建好的iframe元素插入到页面中的某个元素中，代码如下：
$('#parent-element').append($iframe);其中，#parent-element指代父元素的选择器，可以根据实际情况进行调整。
示例代码
下面是一个完整的例子，演示了如何使用jQuery动态插入iframe，并且加载了百度首页：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------
------- ----------------------------------------------------------------------------
-------
------
---- ---------------------
--------
-- ----------
--- ------- - --------------
-- ----------
--------------
------ -------
------- ------
---- ------------------------
------------ ----
---------------- -----
-------- ---------------
---
-- -------
--------------------------------
---------
-------
-------总结
通过jQuery动态插入iframe可以方便地实现页面嵌入不同源的内容，同时也能够限制被嵌入文档的Javascript执行范围。在使用时，我们需要注意同源策略的限制，并根据实际情况设置sandbox属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9340
