JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑,则必须指定contentWindow属性,contentWindow属性支持所有主流浏览器。
相关的还有一个contentDocument属性,这个属性是指指定的frame或者iframe所在的document对象,但是悲剧的是,ie6-ie7并不支持这个属性。
ie6和ie7还可以使用document.frames["iframe Name"]或者 document.frames["iframe ID"]来获取相当于contentWindow属性,而firefox和chrome并不支持这些 document.frames["iframe Name"]或者document.frames["iframe ID"],但是window.frames["iframe Name"]或window.frames[index](index是索引值)也支持所有主流浏览器;
这个可以看实例:http://www.css88.com/demo/iframe-correspond/index-test.html
我们知道document对象是window对象的一个子对象,所以我们可以通过 document.getElementById(“iframe ID”).contentWindow.document来获取iframe的 document对象,相当于contentDocument属性。
2, iframe里的js操作父级窗口的dom
iframe里的js要操作父级窗口的dom,必须搞懂几个对象:
parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),
top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),
self是当前窗口(等价window),
opener是用open方法打开当前窗口的那个窗口;
这样iframe里的js要操作父级窗口的dom可以通过parent,top这些对象来获取父窗口的window对象,例如:
parent.document.getElementById(“dom ID”);
parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;
————————————————
查看一下JS操作iframe里的dom的demo:http://www.css88.com/demo/iframe-correspond/
虽然iframe在现在WEB开发中越来越少用到了,但是iframe还有很多值得使用的地方,比如使用iframe解决跨域问题.关于 iframe还有很多东西要学习,比如iframe自适应高度,使用iframe解决跨域问题,iframe加载问题,iframe加载性能问题等等,还有很多东西要学习,
3, Iframe cannot access You Tube, You Tube lean back and http://www.you tube.com/lean back?version=3
http://lkmmmj.blog.163.com/blog/static/5947137320088248056789/
example,
index.html
<body>
<iframe id="my_iframe" src="video.html" style="position:absolute; left:0; top:0; height:100%; width:100%; border:0px;" scrolling="no"></iframe>
</body>
<head>
<script type="text/javascript" charset="utf-8">
function keypress(e)
{
try {
console.log("Main keypress");
console.log('keyCode=' + keyval(e.keyCode) + ' keyIdentifier=' + keyval(e.keyIdentifier));
// console.log("window.frames[0].window is:" + window.frames[0].window + "window.frames[0].window.getElementById(vid)" + window.frames[0].window.document.getElementById("vid") );
if (e.keyIdentifier == "TV") {
console.log("TV is pressed");
// window.frames[0].window.document.getElementById("vid").pause();
//window.frames[0].window.document.getElementById("vid").parentNode.removeChild(window.frames[0].window.document.getElementById("vid"));
// window.frames[0].window.removeChild(window.frames[0].window.document.getElementById("vid"));
window.history.back();
// window.frames[0].window.history.back();
}
return true;
}
catch (e) {
console.log("XXXXXXXXXXXXXXXXXXXXXXXXXXX keypress error: " + e);
// alert("keypress error: " + e);
}
}
</script>
</head>
video.html
<div style="position:absolute; left: 50px; top: 200px; border: 4px solid pink">
<h2>Video tag</h2>
<video id="vid" width="400" height="300" poster="snurr.png" controls="controls">
<!-- <source src="http://media/streams/kms2091_doctor_who_christmas_2010_special.720p25fps.ts" type="video/mp4"/> -->
<source src="http://192.168.7.105/kms2091_doctor_who_christmas_2010_special.720p25fps.ts" type="video/mp4"/>
<!-- <source src="http://www.html-5.com/media/deep-impact-movie.ogg" type="video/ogg"/> -->
</video>
<br/>
<input type="button" οnclick="console.log("Do_nothing here, if you press this button ");" value="play/pause"/>
<input type="button" οnclick="vid.pause()" value="PAUSE"/>
<input type="button" οnclick="vid.play()" value="PLAY"/>
<input type="button" οnclick="vid.parentNode.removeChild(vid);" value="KILL"/>
<div id="time" style="display: inline; font-size: 200%; border: 1px solid red"></div>
</div>