访问嵌套iframe遇到的问题
来源:互联网 发布:存在主义 知乎 编辑:程序博客网 时间:2024/03/29 19:21
一直想做个类似mini ui中的弹出层效果:能够传递参数,能够返回值。传递参数比较容易,后来卡在返回值问题上,看了mini ui 的实现,原来contentwindow属性来实现返回值(parent和openr也可以实现父子窗口的相互操作, javascript原生代码也有能够实现类似功能的方法:showmodaldialog)。
原始代码如下:
parent.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>全面兼容的Iframe 与父页面交互操作</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <script type="text/javascript" src="jquery.1.3.2.js"></script> <script type="text/javascript"> $(function(){document.getElementById('childframe').contentWindow.childFunction(); }); </script> </head> <body> <div style="width: 100%; height: 250px;"> <iframe id="childframe" name="myiframeA" src="http://localhost:8080/b.html" scrolling="no" frameborder="0"></iframe> </div> </body> </html>
child.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>全面兼容的Iframe 与父页面交互操作</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> function childFunction() { alert("childframe"); } </script> </head> <body> </body> </html>
这是的效果是控制台一直报错:childFunction is not a function .这时我一直以为是浏览器兼容的问题。但是查了资料都说contentwindow属性是所有浏览器都兼容的,各个浏览器调试这个对象也是兼容的。后来在网上看到一个博客说要在onload 方法中才能调用iframe中的方法。后来试结果可以。
parent.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> <title>全面兼容的Iframe 与父页面交互操作</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <script type="text/javascript" src="jquery.1.3.2.js"></script> <script type="text/javascript"> function init() { document.getElementById('childframe').contentWindow.childFunction();} </script> </head> <body onload="init()"> <div style="width: 100%; height: 250px;"> <iframe id="childframe" name="myiframeA" src="http://localhost:8080/b.html" scrolling="no" frameborder="0"></iframe></div> </body> </html>
为什么会产生这种原因?原博主解释大概是iframe中的属性(childFunction())还没有加载完,详情查看onload方法和$.ready();的执行先后和时间。自己也验证了一下:在即将执行前断点调试图:
直接调用时:
onload方法调用:
直接调用不能识别childFunction方法,说明这是iframe没有解析完成或找不到,使用onload方法时childFunction() 为undefine 说明方法已经申明了,没有赋值。这和上面的观点相符合。
父窗口能够调用到子窗口的方法,能够作为弹出层的返回值功能基础。
昨天没写完,今天把后面不起来。
最开始测试的时候用的是Firefox 后来用其他浏览器测试发现不兼容,准确的说也不是兼容问题,在iframe中嵌入b.htmla存在跨域问题,在chrome和360中都存在。
我的解决办法是把两个文件(a.html ,b.html)放在tomcat的根目录下面。测试可以兼容所有的浏览器。
在客户端解决跨域访问方式:
http://blog.csdn.net/fdipzone/article/details/17619673
ps:如有错误请各位大神斧正。
0 0
- 访问嵌套iframe遇到的问题
- IFRAME写法遇到的问题
- 使用iframe遇到的问题
- 使用iframe进行框架嵌套的问题
- MC嵌套访问的问题
- iframe嵌套父页面访问子页的方法
- Flex嵌套Iframe,点击除Iframe的其他地方后,Iframe内容消失的问题。
- Flex嵌套Iframe,点击除Iframe的其他地方后,Iframe内容消失的问题。
- iframe嵌套 session失效问题
- 关于iframe中嵌套的页面刷新的问题
- 函数嵌套调用遇到的问题
- 解决ListView嵌套ListView遇到的问题
- 关于ScrollView嵌套Listview遇到的问题
- ListView嵌套Gridview遇到的问题
- ScrollView嵌套ListView遇到的问题备忘
- Fragment嵌套Fragment遇到的问题
- 关于ScrollView嵌套RecyclerView遇到的问题
- 解决coordinatorlayout嵌套webView遇到的问题
- Python 第二课 使用 Python 进行线程编程
- 求a+aa+aaa+.........+aaaaa=?
- java判断是一年的第几天实例代码
- Android控件_自定义组合控件
- Vijos P1493 传纸条 (双线程DP)
- 访问嵌套iframe遇到的问题
- windows查看某个端口号被占用并结束此进程
- 打开centos的端口,以使其他主机可以访问
- 微信与微博的区别
- poj3140(经典-树的dp)
- 嵌入式ntp服务器的移植
- C++中头文件相互包含的几点问题
- LeetCode之动态规划 (二)
- 条条大道通Google