iframe相关操作

| categories js  | tags iframe 

在页面中操作iframe里的元素

iframe.contentWindow //获取iframe的window对象,chrome要在服务器环境下才能获得(安全考虑)

iframe.contentDoucument //获取iframe的document对象,IE6/7不支持

demo.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>在页面中操作iframe里的元素</title>
	<script type="text/javascript">
	window.onload=function(){
		var 
			btn=document.getElementById('btn'),
			iframe=document.getElementById('iframe');
		btn.onclick=function(){
		    iframe.contentWindow.document.getElementById('div1').style.color='red';
	    }
	}
	</script>
</head>
<body>
	<button id="btn" type="button" value="val">改变颜色</button>
	<iframe src="iframe.html" width="" height=""  id="iframe"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>iframe</title>
</head>
<body>
	<div id="div1" class="test">我是iframe里的内容</div>
</body>
</html>

在iframe里操作父元素的结点

window.parent //获取父层页面,只有一层,chrome还需服务器环境

window.top //获取最顶层页面(中间可能含有多层)

demo.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>在iframe里操作父元素的结点</title>
</head>
<body>
	<div id="div1" class="test">我是父元素里的内容</div>
	<iframe src="iframe1.html" width="" height=""  id="iframe"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>iframe</title>
	<script type="text/javascript">
	window.onload=function(){
		var 
			btn=document.getElementById('btn');
		btn.onclick=function(){
		    window.parent.document.getElementById('div1').style.color='red';
	    }
	}
	</script>
</head>
<body>
<button id="btn" type="button" value="val">改变颜色</button>
</body>
</html>

iframe的onload事件

为何我测试时,onload在各版本IE下都可以运行

iframe.onload=function(){}

iframe.attachEvent(‘onload’,function(){}); //IE只能用绑定的形式

1、IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册。

2、第二种方法比第一种方法更完美,因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>iframe的onload事件</title>
	<script type="text/javascript">
	    window.onload=function(){
		    var iframe=document.createElement('iframe');
		    iframe.src='iframe1.html';
		    document.body.appendChild(iframe);
		    if(iframe.attachEvent){ //IE10及以下版本会执行这个				
			    iframe.attachEvent('onload',function(){
			    	alert(1);
		    	});
		    }else{
			    iframe.onload=function(){
			   		alert(2);
		    	};
		    }
			//document.body.appendChild(iframe);
	    }
	</script>
</head>
<body>
</body>
</html>

防止钓鱼网站

防止自己的网站被内嵌了,被别人拿去钓鱼。

if(window!=window.top){ window.top.location.href=window.location.href; }

demo.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>内嵌别人网站</title>
</head>
<body>
	<iframe src="iframe1.html" id="iframe" ></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>iframe</title>
	<script type="text/javascript">
	/*如果最顶层窗口不是自身的话,说明被内嵌了。*/
	if(window!=window.top){
		window.top.location.href=window.location.href;
	}
	</script>
</head>
<body>
 	已开启防钓鱼功能
</body>
</html>

动态改变iframe大小

demo.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>iframe自适应大小</title>
	<script type="text/javascript">
	window.onload=function(){
		var iframe=document.getElementById('iframe');
	    function autoSize(){
		    iframe.height=iframe.contentWindow.document.body.offsetHeight;
	    };
	    autoSize();
	}
	</script>
</head>
<body>
<iframe src="iframe1.html" id="iframe" frameborder="0" scrolling="no" ></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<title>iframe</title>
	<style type="text/css">
	    body,div{margin:0;padding:0;}
	    div{width:400px;height:400px;background-color: red;}
	</style>
</head>
<body>
 	<div></div>
</body>
</html>

上一篇     下一篇