注意:框架内的页面是不能跨域的!
假设有两个页面，在相同域下。
index.html 文件内含有一个iframe:
复制代码 代码示例:
<!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>页面首页-www.jb200.com</title>
</head>
<body>
<iframe src="iframe.html" id="jbxue" height="0" width="0"></iframe>
</body>
</html>
iframe.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.jb200.com</div>
</body>
</html>
1. 在index.html执行JS直接访问:
复制代码 代码示例:
document.getElementById('jbxue').contentWindow.document.getElementById('test').style.color='red'
通过在index.html访问ID名为'jbxue'的iframe页面，并取得此iframe页面内的ID为'test'的对象，并将其颜色设置为红色。
测试通过,能支持IE/firefox。
2. 在index.html里面借助jquery访问:
复制代码 代码示例:
$("#jbxue").contents().find("#test").css('color','red');
此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.
附，DOM方法与jquery方法相结合实现的例子。
1、在父窗口中操作 选中IFRAME中的所有单选钮
复制代码 代码示例:
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("
checked","true");
2、在IFRAME中操作 选中父窗口中的所有单选钮
复制代码 代码示例:
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe框架的：
复制代码 代码示例:
<iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
以上代码在IE7中测试通过。
