iframe父子页面相互传值.docx

资源ID：3158693 资源大小：38.10KB 全文页数：8页
资源格式： DOCX 下载积分：6.99金币

快捷下载

会员登录下载

三方登录下载：

下载资源需要6.99金币

邮箱/手机：
温馨提示：	用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）
支付方式：
验证码：	换一换

加入VIP免费专享

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

友情提示

1、下载资料失败解决办法

2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。

3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。

4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。

网站客服

侵权投诉

iframe父子页面相互传值.docx

iframe父子页面相互传值iframe与主框架相互访问方法 1.同域相互访问假设A.html 与 b.html domain都是localhost A.html中iframe嵌入 B.html，name=myframe A.html有js function fMain B.html有js function fIframe 需要实现 A.html 调用 B.html 的fIframe，B.html 调用 A.html 的fMain A.html html view plaincopy1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"> 2. <html> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5. <title> main window </title> 6. 7. <script type="text/javascript"> 8. / main js function 9. function fMain 10. alert('main function execute success'); 11. 12. 13. / exec iframe function 14. function exec_iframe 15. window.myframe.fIframe; 16. 17. </script> 18. 19. </head> 20. 21. <body> 22. <p>A.html main</p> 23. <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p> 24. <iframe src="B.html" name="myframe" width="500" height="100"></iframe> 25. </body> 26. </html> B.html html view plaincopy1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"> 2. <html> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5. <title> iframe window </title> 6. 7. <script type="text/javascript"> 8. / iframe js function 9. function fIframe 10. alert('iframe function execute success'); 11. 12. 13. / exec main function 14. function exec_main 15. parent.fMain; 16. 17. </script> 18. 19. </head> 20. 21. <body> 22. <p>B.html iframe</p> 23. <p><input type="button" value="exec main function" onclick="exec_main"></p> 24. </body> 25. </html> 点击A.html 的 exec iframe function button，执行成功，弹出iframe function execute success。如下图点击B.html 的 exec main function button，执行成功，弹出 main function execute success。如下图 2.跨域互相访问假设 A.html domain是 localhost， B.html domain 是 127.0.0.1 这里使用localhost与 127.0.0.1 只是方便测试，localhost与 127.0.0.1已经不同一个域，因此执行效果是一样的。实际使用时换成与即可。 A.html中iframe嵌入 B.html，name=myframe A.html有js function fMain B.html有js function fIframe 需要实现 A.html 调用 B.html 的fIframe，B.html 调用 A.html 的fMain 如果使用上面同域的方法，浏览器判断A.html 与 B.html 不同域，会有错误提示。 Uncaught SecurityError: Blocked a frame with origin "http:/localhost" from accessing a frame with origin "http:/127.0.0.1". Protocols, domains, and ports must match. 实现原理：因为浏览器为了安全，禁止了不同域访问。因此只要调用与执行的双方是同域则可以相互访问。首先，A.html 如何调用B.html的fIframe方法 1.在A.html 创建一个iframe 2.iframe的页面放在 B.html 同域下，命名为execB.html 3.execB.html 里有调用B.html fIframe方法的js调用 javascript view plaincopy1. <script type="text/javascript"> 2. parent.window.myframe.fIframe; / execute parent myframe fIframe function 3. </script> 这样A.html 就能通过 execB.html 调用 B.html 的fIframe方法了。同理，B.html 需要调用A.html fMain方法，需要在B.html 嵌入与A.html 同域的 execA.html execA.html 里有调用 A.html fMain方法的js调用 javascript view plaincopy1. <script type="text/javascript"> 2. parent.parent.fMain; / execute main function 3. </script> 这样就能实现 A.html 与 B.html 跨域相互调用。 A.html html view plaincopy1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"> 2. <html> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5. <title> main window </title> 6. 7. <script type="text/javascript"> 8. 9. / main js function 10. function fMain 11. alert('main function execute success'); 12. 13. 14. / exec iframe function 15. function exec_iframe 16. if(typeof(exec_obj)='undefined') 17. exec_obj = document.createElement('iframe'); 18. exec_obj.name = 'tmp_frame' 19. exec_obj.src = 'http:/127.0.0.1/execB.html' 20. exec_obj.style.display = 'none' 21. document.body.appendChild(exec_obj); 22. else 23. exec_obj.src = 'http:/127.0.0.1/execB.html?' + Math.random; 24. 25. 26. </script> 27. 28. </head> 29. 30. <body> 31. <p>A.html main</p> 32. <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p> 33. <iframe src="http:/127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe> 34. </body> 35. </html> B.html html view plaincopy1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"> 2. <html> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5. <title> iframe window </title> 6. 7. <script type="text/javascript"> 8. / iframe js function 9. function fIframe 10. alert('iframe function execute success'); 11. 12. 13. / exec main function 14. function exec_main 15. if(typeof(exec_obj)='undefined') 16. exec_obj = document.createElement('iframe'); 17. exec_obj.name = 'tmp_frame' 18. exec_obj.src = 'http:/localhost/execA.html' 19. exec_obj.style.display = 'none' 20. document.body.appendChild(exec_obj); 21. else 22. exec_obj.src = 'http:/localhost/execA.html?' + Math.random; 23. 24. 25. </script> 26. 27. </head> 28. 29. <body> 30. <p>B.html iframe</p> 31. <p><input type="button" value="exec main function" onclick="exec_main"></p> 32. </body> 33. </html> execA.html html view plaincopy1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"> 2. <html> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5. <title> exec main function </title> 6. </head> 7. 8. <body> 9. <script type="text/javascript"> 10. parent.parent.fMain; / execute main function 11. </script> 12. </body> 13. </html> execB.html html view plaincopy1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"> 2. <html> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5. <title> exec iframe function </title> 6. </head> 7. 8. <body> 9. <script type="text/javascript"> 10. parent.window.myframe.fIframe; / execute parent myframe fIframe function 11. </script> 12. </body> 13. </html> 执行如下图：源码下载地址：点击查看

注意事项

本文（iframe父子页面相互传值.docx）为本站会员（牧羊曲112）主动上传，三一办公仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知三一办公（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。