在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" onclick="clickHandler1()">请点击我(error)</div>
<div class="a" onclick="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" onclick="clickHandler1()">请点击我(error)</div>
<div class="a" onclick="clickHandler2()">请点击我(success)</div>
</body>
</html>
转载：www.cssrain.cn/?p=1376
分享到：
相关推荐
本篇文章将详细探讨一个与`createElement`方法有关的问题，这个问题主要体现在IE6和IE7这两个版本中。 `createElement`是JavaScript中的一个DOM操作方法，用于在当前文档中创建一个新的HTML元素。通常，我们可以...
在IE中，使用`document.createElement()`创建表格元素，`appendChild()`或`insertBefore()`添加到已有元素中，可能需要特别处理IE的特例。 4. **事件处理**： - IE对事件处理函数的支持与非IE浏览器不同。例如，IE...
使用`document.createElement`结合`setAttribute`方法创建单选按钮时，在IE中可能会有问题。 **解决方法：** 直接使用HTML字符串创建单选按钮： ```javascript var radio = document.createElement(...
兼容性问题也是在使用`createElement`时需要关注的一个点。虽然W3C标准的`document.createElement` 方法在现代浏览器中得到了广泛支持，但在早期，尤其是IE浏览器中，存在着兼容性问题。为了解决这个问题，可以针对...
确保控件注册成功后，我们可以在JavaScript中通过`document.createElement('object')`创建一个对象元素，并设置其`classid`属性为OCX控件的CLSID，从而在网页中插入该控件。 为了实现异步打印，我们需要使用...
"ie6-10兼容性解决-js.zip"这个压缩包显然为了解决在这些版本的IE中JavaScript代码的兼容性问题。 JavaScript是一种广泛使用的编程语言，用于创建交互式的网页。IE6至IE10之间的兼容性问题主要涉及以下方面： 1. *...
让IE（包括IE6）支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement_x声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也...
- **创建单选按钮**: 当需要创建一个单选按钮时，两种浏览器也存在差异。 - 在Firefox中，可以通过`document.createElement('input')`并设置其类型、名称等属性来创建单选按钮。 - 而在IE中，可以采用更简洁的方式...
标题中的“整理 IE 7、8 预览本地图片和获取本地图片大小”涉及到的是在Internet Explorer 7和8这两个较旧版本的浏览器中，如何处理本地图片的预览和获取图片尺寸的问题。在早期的Web开发中，由于浏览器兼容性问题，...
这段代码主要目的是创建一个隐藏的`<iframe>`元素，用于解决浏览器的历史记录问题。其中： - `document.createElement("iframe")`：创建一个新的`<iframe>`元素。 - `setAttribute`方法被用来设置`<iframe>`的属性，...
Excanvas是一个由G_v2开发的开源项目，其主要目标就是为旧版IE浏览器提供canvas的支持。它通过VML（Vector Markup Language）来模拟canvas的功能，因为VML是IE浏览器内建的一种矢量图形渲染机制。在页面中引入...
首先，我们需要一个能够生成二维码的库。在JavaScript中，有一个名为`qrcode-generator`的库，它可以创建不同类型的二维码，包括文本、URL等。要使用这个库，你需要将其通过npm或CDN引入到项目中。如果你选择使用npm...
让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会...
然而，一个常见的问题是在Internet Explorer（IE）浏览器中，通过`document.createElement`创建的`iframe`元素无法设置`name`属性，这可能导致一些功能无法正常工作，例如链接或表单的目标定位。 `name`属性对于`...
上述代码片段中，`this.ClickFunctionName`是需要被触发的函数名，`pageIndex`是传递给该函数的参数，`Pager.SetCurrent`是另一个需要执行的方法。`eval`函数将字符串`js`作为JavaScript代码执行，从而触发对应的...
标题提到的“检查浏览器IE6提示升级”是一个常见的情况，特别是在开发或维护网站时，开发者可能会遇到需要对仍然使用IE6的用户进行提示升级浏览器的需求。这一现象主要是由于IE6不支持许多现代Web技术，如CSS3、...
在IE中，`document.createElement()` 可以接受一个包含HTML属性的字符串，如 `";border-bottom:2px solid #c0c0c0;' readonly>"`，这样创建的元素可以直接带有预设的属性。然而，Firefox并不支持这种做法，可能会...
例如，假设需要为一个`<span>`元素设置粗体和红色字体： ```javascript var spanElement = document.getElementById('mySpan'); // 对于非IE浏览器 spanElement.style.cssText = 'font-weight:bold;color:red;'; ...
总的来说，解决IE浏览器的兼容问题需要对各种特性、工作原理以及其历史版本的差异有深入理解。随着IE逐渐退出历史舞台，开发者应更多地关注现代浏览器的兼容性，但对遗留的IE项目，这些知识仍然是宝贵的。