`

用JS或jQuery访问页面内的iframe,兼容IE/FF

IEjQueryJavaJavaScript框架 
阅读更多
js或者jQuery访问页面中的框架也就是iframe.
注意:框架内的页面是不能跨域的!
假设有两个页面,在相同域下.
index.html 文件内含有一个iframe:

XML/HTML代码 
<!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=gb2312" />   
<title>页面首页</title>   
</head>   
   
<body>   
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>   
</body>   
</html>


iframe.html 内容:

XML/HTML代码 
<!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=gb2312" />   
<title>iframe.html</title>   
</head>   
   
<body>   
<div id="test">www.koyoz.com</div>   
</body>   
</html>



1. 在index.html执行JS直接访问:

JavaScript代码 
document.getElementById('koyoz').contentWindow.document.getElementById('test').style.color='red'


通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的对象,并将其颜色设置为红色.

此代码已经测试通过,能支持IE/firefox .
2. 在index.html里面借助jQuery访问:

JavaScript代码 
$("#koyoz").contents().find("#test").css('color','red');


此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.

分享到：
| JavaScript执行window.onload和body onloa ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics