操作iframe中的DOM元素

最新推荐文章于 2024-07-24 23:21:50 发布

原创最新推荐文章于 2024-07-24 23:21:50 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何在网页中操作iframe内的DOM元素，并提供了一个具体的示例。主要通过获取指定iframe的document来实现DOM操作，同时强调了必须在页面加载完成后才能进行相关操作。

操作iframe中的DOM元素，有两个注意点：
1、必须先获取指定iframe的document；
2、对于1，必须在页面load完以后才能获取；

举例说明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>操作iframe中的DOM元素</title>
<script type="text/javascript">
<!--
//返回指定iframe的document
function getIFrameDocument(aID) {
var rv = null;
if (document.getElementById(aID).contentWindow.document){
// if contentDocument exists, W3C compliant (Mozilla)
rv = document.getElementById(aID).contentWindow.document;
} else {
// IE
rv = document.frames[aID].document;
}
return rv;
}
function bindEvents() {
var iDocument = getIFrameDocument('test');
//接下来就可以进行类似的DOM操作了
var map = iDocument.getElementById('map');
//……
}
//-->
</script>
</head>
<body onload="bindEvents()">
<iframe id="test" name="giscontent" src="iframe.html" frameborder="0" scrolling="no">
</iframe>
</body>
</html>