📅 最后修改于: 2023-12-03 14:50:24.311000 🧑 作者: Mango
在 Web 开发中，常常需要在网页中嵌入 iFrame，以便在一个网页中展示不同的内容。而当我们需要对 iFrame 中的内容进行交互操作时，就会用到 jQuery。
iFrame 是用 HTML <iframe> 标签创建的，通过其 src 属性指定要嵌入的网址或文件。在 iFrame 加载期间，可以使用 jQuery 来操作 iFrame 中的元素或修改其样式。
以下是加载 iFrame 时使用 jQuery 的一些常用操作：
首先，我们可以使用 contents() 函数来获取 iFrame 中的文档内容。例如：
$('iframe').contents().find('#myDiv').html('Hello World');
这会将 iFrame 中 ID 为 myDiv 的元素的 HTML 内容设置为 'Hello World'。
我们还可以将 iFrame 中的表单数据提交到服务器：
$('iframe').contents().find('form').submit();
如果需要访问 iFrame 中的 JavaScript 变量，我们可以使用 contentWindow 属性：
var myVar = $('iframe')[0].contentWindow.myVar;
这会将 iFrame 中名为 myVar 的变量赋值给 myVar 变量。
我们可以使用 jQuery 的 css() 函数来修改 iFrame 的样式。例如：
$('iframe').css('width', '500px');
这会将 iFrame 的宽度设置为 500px。
当然，我们也可以直接修改 iFrame 的 HTML 和 CSS。例如：
var myHTML = '<div>My HTML content</div>';
var myCSS = 'div { background-color: yellow; }';
$('iframe').contents().find('body').html(myHTML);
$('iframe').contents().find('style').html(myCSS);
这会将 iFrame 中 <body> 元素的 HTML 设置为 '<div>My HTML content</div>'，并将 CSS 样式设置为 'div { background-color: yellow; }'。
以上就是加载 iFrame 时使用 jQuery 的一些常用操作。在实际工作中，需要根据具体情况来选取适合自己的方法。