在做项目时,遇到了操作iframe的相关问题。业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终报错,不能通过。
子页面child.html的代码如下
父页面parent.html的代码如下
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head><title>
- </title>
- <script src="jquery-1.10.1.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- function ParentFunction() {
- alert('ParentFunction');
- }
- </script></head>
- <body>
- <input type="button" id="btnCancel" class="button" value="测试" />
- <iframe id="FRMdetail" name="FRMdetail" frameborder="0" src='child.html' style="width:100%;height:100%;" ></iframe>
- </body>
- </html>
子页面child.html的代码如下
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head><title>
- </title>
- <script src="jquery-1.10.1.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $("#btnTest").click(function (e) {
- var t=window.parent;
- t.ParentFunction();
- });
- })
- </script></head>
- <body>
- <input type="button" id="btnTest" class="button" value="应该获取的值" />rrr
- </body>
- </html>
网络上流行的方法 var t=window.parent; t.ParentFunction();在IE中能调用,可是在谷歌浏览器中总是提示如下错误,
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
网上找了很长时间都没法发现方法,有的也是很早以前的版本,基本上没用了,而且人云亦云,基本上没有测试过。于是自己摸索,后来才发现,谷歌浏览器其实那种方法其实也可以,只是很奇怪,必须发布后才可以,在文件系统中调用,就会出现上边的错误。
其实还有一种html5的方法postMessage,于是就根据着进行了改写,最终代码如下:
父页面parent.html的代码如下
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head><title>
- </title>
- <script src="jquery-1.10.1.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- this.ParentFunction= function() {//和注释掉的方法是一样的,也就是说加不加this都是一样的,因为此处的this就是windows
- alert('ParentFunction');
- }
- // function ParentFunction() {
- // alert('ParentFunction');
- // }
- function receiveMessage(e) {
- var data = e.data; //获得传递的值
- ParentFunction() ;
- //if(data=="ParentFunction")
- //{
- // ParentFunction() ;
- //}
- }
- if (typeof window.addEventListener != 'undefined') {//使用html5 的postMessage必须处理的
- window.addEventListener('message', receiveMessage, false);
- } else if (typeof window.attachEvent != 'undefined') {
- window.attachEvent('onmessage', receiveMessage);
- }
- </script></head>
- <body>
- <input type="button" id="btnCancel" class="button" value="测试" />
- <iframe id="FRMdetail" name="FRMdetail" frameborder="0" src='child.html' style="width:100%;height:100%;" ></iframe>
- </body>
- </html>
子页面child.html的代码如下
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head><title>
- </title>
- <script src="jquery-1.10.1.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $("#btnTest").click(function (e) {
- var t=window.parent;
- if(!t.ParentFunction)//在不支持时,使用html5 的postMessage方法 ,第一个参数是需要传递的值
- {
- t.postMessage("ParentFunction", '*');
- }
- else
- {
- t.ParentFunction();
- }
- });
- })
- </script></head>
- <body>
- <input type="button" id="btnTest" class="button" value="应该获取的值" />rrr
- </body>