IE中createElement需要注意的一个小问题

最新推荐文章于 2020-12-10 22:50:43 发布

dyunlong

最新推荐文章于 2020-12-10 22:50:43 发布

阅读量501

点赞数

分类专栏： javascript 转载 jQuery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/dyunlong/article/details/84048693

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

转载

5 篇文章 0 订阅

订阅专栏

在iframe中，创建一个元素，然后添加到父页面中在ie6，ie7中行不通，而firefox和IE8可以

如果你想在IE6,IE7中创建一个父页面元素，那么你必须使创建元素属于父页面。

在Firefox,IE8中，它允许在一个文档中创建要追加到另一个文档的元素。

所以在Firefox,IE8中，可以使用parent.document也可以使用document。

page1页面代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IE中createElement需要注意的一个小问题</title>
</head>
<body>
<body style="background:#0a0;">
<iframe id="TheFrame"
	style="width:100%; height:140px;background:#fff;" 
	frameborder="1" src="page3.html">
</iframe>
<iframe id="TheFrame" 
	style="width:100%; height:140px;background:#fff;
	"frameborder="1" src="page2.html">
</iframe>
</body>
</html>

page2页面代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.a {
	width: 200px;
	height: 20px;
	background: #00a;
	cursor: pointer;
	text-align: center;
	color: #fff;
	margin: 10px 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function clickHandler1(){ 
	var $alertPanel = $( document.createElement("div")  );
	$alertPanel.css("width","120px").css("height","50px")
	.css("border","solid 1px #000000").text("Hello CssRain!");
	$('body',parent.document).append($alertPanel);
}
function clickHandler2(){ 
	var $alertPanel = $( parent.document.createElement("div")  );
	$alertPanel.css("width","120px").css("height","50px")
	.css("border","solid 1px #000000").text("Hello CssRain!");
	$('body',parent.document).append($alertPanel);
}
</script>
</head>
<body>
<h3>这里是jQuery方法操作</h3>

<div class="a" οnclick="clickHandler1()">请点击我(error)</div>
<div class="a" οnclick="clickHandler2()">请点击我(success)</div>
</body>
</html>

page3页面代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.a {
	width: 200px;
	height: 20px;
	background: #00a;
	cursor: pointer;
	text-align: center;
	color: #fff;
	margin: 10px 0;
}
</style>
<script language="javascript" type="text/javascript">
function clickHandler1(){  
	 var div = document.createElement("div");
	 div.style.width = "120px"; 
	 div.style.height = "50px";
	 div.style.border = "solid 1px #000000";
	 div.innerHTML = "Hello CssRain!";
	 parent.document.body.appendChild(div);
}
function clickHandler2(){  
	 var div = parent.document.createElement("div");
	 div.style.width = "120px"; 
	 div.style.height = "50px";
	 div.style.border = "solid 1px #000000";
	 div.innerHTML = "Hello CssRain!";
	 parent.document.body.appendChild(div);
}
</script>
</head>
<body>
<h3>这里是原生的DOM方法操作</h3>
<div class="a" οnclick="clickHandler1()">请点击我(error)</div>

<div class="a" οnclick="clickHandler2()">请点击我(success)</div>
</body>
</html>

转载：www.cssrain.cn/?p=1376