此篇记录关于HTML 的 iframe 元素 的相关记录
定义：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
常用的基本 iframe 设置（详细设置属性参考API：http://www.w3school.com.cn/tags/tag_iframe.asp）：
<iframe id="alarmStateTabIframe" scrolling="no" src=""></iframe>
关于 iframe 的相关操作：
- iframe 父页面获取&操作子页面元素（使用 iframe id 属性调用）
示例：
父页面：parentPage.html 文件，里面含有一个 iframe<!DOCTYPE html><!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>页面首页</title> ???<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body> ???<div id=‘parDiv‘>父页面</div> ???<iframe src="childPage.html" id="youyou" height="100" width="100"></iframe> ?<!-- 包含的 iframe --> ???<script> ???????<!-- 父页面调用子页面 测试： 使用 id 属性调用 --> ???????window.onload = function(){ ???????????document.getElementById(‘youyou‘).contentWindow.document.getElementById(‘test‘).style.color = ‘#ff1e19‘; ???????????// ?等价于jquery: ?$("#youyou").contents().find("#test").css(‘color‘,‘red‘); ???????}; ???</script></body></html>子页面：childPage.html 文件，里面含有一个 iframe
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>子页面</title></head><body> ???<div id="test">我是iframe测试的子页面</div></body></html>
运行父页面，会看到父页面的iframe部分写入了子页面文字!!
总结：1. 父页面中 JS 获取/更改iframe子页面内容: ??JS 获取: $(document.getElementById(‘youyou‘).contentWindow.document.body).html() //eg: $(document.getElementById(‘youyou‘).contentWindow.document.body).html("<h6>gusgu</h6><div id=‘test‘> ghyauati</div>")
?jquery 获取：$("#youyou",$(‘#test‘).document); //$("#youyou",parent.document.body).attr("src","http://www.baidu.com"); 替换子页面原来的所有内容2. 父页面中 JS 操作iframe子页面的某个元素:
?JS 获取: document.getElementById(‘youyou‘).contentWindow.document.getElementById(‘test‘).style.color=‘red‘
?jquery 获取：格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();
????????????实例: $("#youyou").contents().find("#test").css(‘color‘,‘red‘); //eg: $("#theiframe").contents().find("#flag").html()其他操作（未测）：
jquery 父、子页面之间页面元素的获取，方法的调用：1. 父页面获取子页面元素：
格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();
实例：$("#ifm").contents().find("#iBtnOk").click(); // ifm 为 <iframe> 标签 id; iBtnOk 为子页面按钮 id
2. 父页面调用子页面方法：
格式：$("#iframe的ID")[0].contentWindow.iframe方法();
实例：$("#ifm")[0].contentWindow().iClick(); // ifm 为 <iframe> 标签 id; iClick为子页面 js 方法
3. 子页面获取父页面元素：
格式：$("#父页面元素id" , parent.document);
实例：$("#pBtnOk" , parent.document).click(); // pBtnOk 为父页面标签 id3. 在父窗口中操作 选中 iframe 中的所有单选钮
?$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
4. 在IFRAME中操作 选中父窗口中的所有单选钮
?$(window.parent.document).find("input:radio").attr("checked","true");
5. 父窗口想获得IFrame中的Iframe，就再加一个frames子级就行了，如：
?$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");父页面里的 iframe 中的某个元素获取
- iframe 父页面获取&操作子页面元素（使用 iframe name 属性调用）
示例：父页面：parentPage.html，
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>页面首页</title> ???<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body> ???<iframe name="iframe1" src="childPage.html"></iframe> ???<script> ???????window.onload =function () { ???????????$(window.frames["iframe1"].document).on("click","#btn",function(){ ?//window.frames["iframe1"].document获的iframe标签嵌套页面document对象 ???????????????$(this).html("1123"); ???????????}) ???????} ???</script></body></html>子页面：childPage.html，
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>子页面</title></head><body> ???<button id="btn">测试操作</button></body></html>
运行父页面，点击按钮会看到按钮上文字变化!!
- 子页面 操作获取&操作父页面元素：
参考： http://www.jb51.net/article/43406.htm父页面写好div+iframe, 子页面中 JS 调用相应的元素，方法等父页面：parentPage.html, 书写页面
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>页面首页</title></head><body> ???<form id="form1"></form> ???<div> ???????<div id="default" style="width: 100px; height: 100px; float: left;">default 里的卡卡</div> ???????<iframe id="iframeid" src="childPage.html" style=" width:400px; height:400px; float:left;"></iframe> ???</div> ???<script> ???????var h = "hello"; ???????function getHelloWo() { ???????????alert("welcome to the world"); ???????} ???</script></body></html>子页面： childPage.html操作父页面
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>子页面</title> ???<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body> ???<script> ???????$(function () { ???????????//在iframe中查找父页面元素 ???????????alert($("#default", window.parent.document).html()); ???????????//在iframe中调用父页面中定义的方法 ???????????parent.getHelloWo(); ???????????//在iframe中调用父页面中定义的变量 ???????????alert(parent.h); ???????}) ???</script></body></html>运行 父页面 parentPage.html 看看效果，会不断弹出窗口；
总结：
原生 js 父页面元素的获取，方法的调用：1. 子页面调用父页面方法： ???格式：parent.父页面方法 ???实例：parent.pClick(); // pClick 为父页面 js 方法 2. 子页面获取父页面元素： ???格式：window.parent.document.getElementById("父窗口元素ID"); ???实例：window.parent.document.getElementById("pBtnOk");// pBtnOk为父页面标签 id再示例： 子页面追加/更改元素：
父页面：parentPage.html 至少包含一个 iframe
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>父级页面</title> ???<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body> ???<div id="example">这是父级页面！</div> ???<iframe name="iframe1" src="childPage.html"></iframe></body></html>
子页面：childPage.html, 操作 父页面中元素
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>子页面</title> ???<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body> ???<script language="javascript"> ???????$("body",parent.document).append(‘<br>这是子级页面追加的内容！‘); ?//子页面给父页面追加内容 ???????$("body",parent.document).find(‘#example‘).html(‘子级页面将替换父级页面的内容！‘); ?//子页面改变父页面某个元素内容 ???</script></body></html>运行父页面 parentPage.html ，可以看到父页面内容的变化；
jquery 实践操作：iframe ?相关操作
原文地址：https://www.cnblogs.com/ostrich-sunshine/p/8027009.html