JS操纵iframe元素
标签：
参考链接1：https://www.cnblogs.com/html55/p/10163631.html 参考链接2：https://www.runoob.com/jsref/dom-obj-frame.html Frame 东西Frame 东西代表一个 HTML 框架。
<frame>标签界说了在框架中一个特定的窗口（框架）。
在 HTML 文档中 <frame> 每呈现一次，就会创建一个 Frame东西。
IFrame 东西IFrame 东西代表一个 HTML 的内联框架。
<iframe> 标签界说了包罗此外一个文档的内联框架。
在 HTML 文档中 <iframe> 每呈现一次，一个 IFrame 东西就会被创建。
Frame/IFrame 东西属性
属性描述W3Calign 按照周围的文字摆列 iframe。 Yes
contentDocument 容纳框架的内容的文档。返回 frame/iframe 生成的文档东西。 Yes
contentWindow 返回 frame/iframe 生成的 window 东西。 No
frameBorder 设置或返回是否显示框架周围的边框。 Yes
height 设置或返回 iframe 的高度。 Yes
longDesc 设置或返回指向包罗框架内容描述文档的 URL。 Yes
marginHeight 设置或返回 iframe 的顶部和底部的页空白。 Yes
marginWidth 设置或返回 frame/iframe 的左侧和右侧的页空白。 Yes
name 设置或返回 frame/iframe 的名称。 Yes
noResize 设置或返回框架是否可调解巨细。 Yes
scrolling 设置或返回框架是否可拥有滚动条。 Yes
src 设置或返回应被加载到框架中的文档的 URL。 Yes
width 设置或返回 iframe 的宽度。 Yes
onload 事件在frame或者iframe载入完成后被触发。
实例：
1. demo1.html页面中有个iframe元素，iframe元素的src是iframe1.html，怎么在demo1.html页面中操纵iframe1.html页面答曰：demo1.html中，js先找到iframe元素（好比定名为：oIframe），那么oIframe.contentWindow就是iframe1.html这个页面的window，剩下了就是DOM操纵的工作了。
举例：要求：demo1.html页面中有个按钮，点击按钮，iframe1页面某些文字转变颜色
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=http://www.mamicode.com/"UTF-8"> 5 <title>我是demo1.html</title> 6 </head> 7 <body> 8 9 <input type=http://www.mamicode.com/"button" name=http://www.mamicode.com/"btn1" id=http://www.mamicode.com/"btn1" value=http://www.mamicode.com/"点击按钮控制iframe页面" /> 10 <br /> 11 <iframe id=http://www.mamicode.com/"iframe1" src=http://www.mamicode.com/"iframe1.html" width=http://www.mamicode.com/"300" height=http://www.mamicode.com/"200"></iframe> 12 <script> 13 window.onload =http://www.mamicode.com/ function(){ 14 var oBtn1 = document.getElementById(‘btn1‘); 15 //获取iframe元素,oIframe.contentWindow就是iframe1.html页面的window东西 16 var oIframe = document.getElementById(‘iframe1‘); 17 oBtn1.onclick =http://www.mamicode.com/ function() { 18 //demo1.html页面中的js控制了iframe1.html页面的字体颜色 19 oIframe.contentWindow.document.body.style.color = ‘red‘; 20 } 21 } 22 </script> 23 24 25 </body> 26 </html>
View Code
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32815.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")