iframe

最新推荐文章于 2024-04-15 15:25:05 发布

bamboolsu

最新推荐文章于 2024-04-15 15:25:05 发布

阅读量539

点赞数

分类专栏： HTML5_web_https_http_etc

本文链接：https://blog.csdn.net/bamboolsu/article/details/42969833

版权

HTML5_web_https_http_etc 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

1，父级窗口操作iframe里的dom

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>

<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://192.168.7.105/kms2091_doctor_who_christmas_2010_special.720p25fps.ts" type="video/mp4"/>

</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>

bamboolsu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iframe

1，父级窗口操作iframe里的domJS操作iframe里的dom可是使用contentWindow属性，contentWindow属性是指指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑，则必须指定contentWindow属性，contentWin
复制链接

扫一扫