获得iframe的window对象 存在跨域访问限制
chrome iframeElement contentWindow firefox iframeElement contentWindow ie iframeElement contentWindow
文章Iframes onload and document domain中说“he iframe element object has a property called contentDocument that contains the iframe s document object so you can use the parentWindow property to retrieve the window object ”意思就是一些浏览器可以通过iframeElement contentDocument parentWindow获得iframe的 window对象 但经过测试firefox chrome的element contentDocument对象没有parentWindow属性
(javascript)
复制代码 代码如下: function getIframeWindow(element){ return element contentWindow//return element contentWindow || element contentDocument parentWindow}获得iframe的document对象 存在跨域访问限制
chrome iframeElement contentDocument firefox iframeElement contentDocument ie element contentWindow document 备注 ie没有iframeElement contentDocument属性
(javascript)
复制代码 代码如下: var getIframeDocument = function(element) { return element contentDocument || element contentWindow document}iframe中获得父页面的window对象 存在跨域访问限制
父页面 window parent 顶层页面 window top 适用于所有浏览器
获得iframe在父页面中的标签 存在跨域访问限制
window frameElement（类型 HTMLElement） 适用于所有浏览器
iframe的onload事件 非ie浏览器都提供了onload事件 例如下面代码在ie中是不会有弹出框的
(javascript)
复制代码 代码如下: var ifr = document createElement( iframe )ifr src = ifr onload = function() { alert( loaded )}document body appendChild(ifr)但是ie却又似乎提供了onload事件 下面两种方法都会触发onload
方法一
复制代码 代码如下: <iframe onload="alert( loaded )" src="方法二 //只有ie才支持为createElement传递这样的参数
复制代码 代码如下: var ifr = document createElement( <iframe onload="alert( loaded )" src=" )document body appendChild(ifr)由于iframe元素包含于父级页面中 因此以上方法均不存在跨域问题
实际上IE提供了onload事件 但必须使用attachEvent进行绑定
复制代码 代码如下: var ifr = document createElement( iframe )ifr src = if (ifr attachEvent) { ifr attachEvent( onload function(){ alert( loaded )})} else { ifr onload = function() { alert( loaded )}} document body appendChild(ifr)frames window frames可以取到页面中的帧(iframe frame等) 需要注意的是取到的是window对象 而不是HTMLElement
复制代码 代码如下: lishixinzhi/Article/program/Java/JSP/201311/19939
网页加载的时候，iframe里面的还没加载完当然就更改不了。
1.纯js的
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/htmlcharset=utf-8"/>
<title>无标题文档</title>
<scriptlanguage="javascript">
functionc(){
vara
try{
if(document.all){
a=document.frames["a"].document
}else{
a=document.getElementById("a").contentDocument
}
varb=a.getElementsByName("b")[0]
b.disabled=true
clearInterval(d)
}
catch(ex){
}
}
</script>
</head>
<body>
<iframeid="a"src="b.html"onload="c()"></iframe>
</body>
</html>
2.使用jQuery框架的，建议使用，封装了js，操作DOM等等非常方便
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/htmlcharset=utf-8"/>
<title>无标题文档</title>
<scriptlanguage="javascript"src="/js/jquery-1.4.4.js"type="text/javascript"></script>
<scriptlanguage="javascript"type="text/javascript">
<!--//
$(document).ready(function(){
if($.browser.msie){
$('#a').ready(function(){
$(window.frames["a"].document).find("input").attr("disabled","disabled")
})
}
else{
$('#a').load(function(){
$('#a').contents().find("input").attr("disabled","disabled")
})
}
})
//-->
</script>
</head>
<body>
<iframeid="a"name="a"src="iframechild.html"></iframe>
</body>
</html>
b.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/htmlcharset=utf-8"/>
<title>无标题文档</title>
</head>
<body>
<formname="cform"><inputtype="text"name="b"/></form>
</body>
</html>
在js中，需要监听iframe的点击事件，但是因为浏览器的同源策略，是无法监听到的，只能另辟蹊径去解决它 注意，仅限于pc网站，意思就是必须要有鼠标移入移出iframe的操作<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html charset=ISO-8859-1"> <title>Detect IFrame Clicks</title> <script src="./jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var currentObj=Object var isOverIFrame = false function processMouseOut(e) { console.log('out iframe',e.target) currentObj=e.target isOverIFrame = false top.focus() } function processMouseOver(e) { // log("IFrame mouse >> OVER << detected.") console.log('in iframe',e.target) currentObj=e.target isOverIFrame = true } function processIFrameClick(event) { if(isOverIFrame) { console.log('click iframe',event.target,currentObj) } } function attachOnloadEvent(func, obj) { if(typeof window.addEventListener != 'undefined') { window.addEventListener('load', func, false) } else if (typeof document.addEventListener != 'undefined') { document.addEventListener('load', func, false) } else if (typeof window.attachEvent != 'undefined') { window.attachEvent('onload', func) } else { if (typeof window.onload == 'function') { var oldonload = onload window.onload = function() { oldonload() func() } } else { window.onload = func } } } function init() { var element = document.getElementsByTagName("iframe") for (var i=0 i<element.length i++) { element[i].onmouseover = processMouseOver element[i].onmouseout = processMouseOut } if (typeof window.attachEvent != 'undefined') { top.attachEvent('onblur', processIFrameClick) } else if (typeof window.addEventListener != 'undefined') { top.addEventListener('blur', processIFrameClick, false) } } attachOnloadEvent(init) }) </script> </head> <body> <iframe src="https://www.hao123.com" width="80%" height="600px"></iframe> <iframe src="https://www.baidu.com" width="80%" height="600px"></iframe> </form> </body> </html>复制上边整段html，打开console控制台，即可解决这个问题，亲测好用
