jquery 改变iframe内容
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 改变iframe内容相关的知识，希望对你有一定的参考价值。
有两个页面分别是a.html,b.html.
a里面包含一个iframe，iframe加载b，我通过jquery获取b的内容进行修改。
a主要代码如下，
<script>
$(function()
$("iframe").contents().find("body").html("你好!");
);
</script>
</head>
<body>
<iframe src="b.html"></iframe>
</body>
b是一个空白页面，现在刷新a的瞬间b中会出现“你好”，但是瞬间又变成空白页面，这是什么原因？
我试了一下，把jquery代码放在body后面也是不行的，但是页面上放一个按钮，把jquery代码放在按钮里面完全没问题。
例如，在Chrome控制台出现错误：
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a cross-origin frame
解决办法：
上传到服务器，问题就不会出现了。 参考技术A 因为js在body前先加载了；
当body元素加载出来，js就执行了，而iframe却加载没js执行快，才出现“你好”，但是瞬间又变成空白页面。
可以把scrpit放到body后面加载。
jquery怎么操作iframe
使用jquery操作iframe1、 内容里有两个ifame
<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>
leftiframe中jQuery改变mainiframe的src代码：
$("#mainframe",parent.document.body).attr("src","http://www.radys.cn")
2、 如果内容里面有一个ID为mainiframe的ifame
<iframe id="mainifame"...></ifame>
ifame包含一个someID
<div id="someID">you want to get this content</div>
得到someID的内容
$("#mainiframe").contents().find("someID").html() html 或者 $("#mainiframe").contains().find("someID").text()值
3、在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
那选择id自然就是依然使用find方法
$(window.frames["iframe1"].document).find("#id")
4、 如上面所示
leftiframe中的jQuery操作mainiframe的内容someID的内容
$("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()
参考：http://www.cnblogs.com/xyicheng/archive/2010/02/26/1674017.html 参考技术A 1、iframe子页面调用父页面js函数
子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数，就写成：
复制代码代码如下:
window.parent.a();
子页面取父页面中的标签中的值，比如该标签的id为“test”,则：
复制代码代码如下:
window.parent.document.getElementById("test").value;
jQuery方法为：
$(window.parent.document).contents().find("test").val();
但是我在chrome浏览器下却发现此方法无效了！查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的。此方法支持ie、firefox浏览器。
2、iframe父页面调用子页面js函数
复制代码代码如下:
这个就稍微复杂一些，下面的方法支持ie和firefox浏览器：
document.getElementById('ifrtest').contentWindow.b();
子页面取父页面中的标签中的值，比如该标签的id为“test”,则：
document.getElementById("test").value;
注：ifrtest是iframe框架的id，b()为子页面js函数。contentWindow属性是指定的frame或者iframe所在的window对象，IE下可以省略。 参考技术B 用 iframe 里的 jQuery 操作是最简单的。否则先得取出 iframe 里的元素再用 jQuery 包覆。如果拿不到 iframe 的元素，大概是跨域限制，jQuery 也是没有办法的。
以上是关于jquery 改变iframe内容的主要内容，如果未能解决你的问题，请参考以下文章
jquery，iframe,如何在父窗口监听，子窗口发生改变时，父窗口获取子窗口的值