iframe父子页面相互传值.docx

《iframe父子页面相互传值.docx》由会员分享，可在线阅读，更多相关《iframe父子页面相互传值.docx（8页珍藏版）》请在三一办公上搜索。

1、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. 2. 3. 4. 5. main window 6. 7. 8. / main js function

2、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. 18. 19. 20. 21. 22. A.html main 23. 24. 25. 26. B.html html view plaincopy1. 2. 3. 4. 5. iframe window 6. 7. 8. / iframe js function 9. function

3、 fIframe 10. alert(iframe function execute success); 11. 12. 13. / exec main function 14. function exec_main 15. parent.fMain; 16. 17. 18. 19. 20. 21. 22. B.html iframe 23. 24. 25. 点击A.html 的 exec iframe function button，执行成功，弹出iframe function execute success。如下图 点击B.html 的 exec main function button，

4、执行成功，弹出 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.htm

5、l 的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

6、 如何调用B.html的fIframe方法 1.在A.html 创建一个iframe 2.iframe的页面放在 B.html 同域下，命名为execB.html 3.execB.html 里有调用B.html fIframe方法的js调用 javascript view plaincopy1. 2. parent.window.myframe.fIframe; / execute parent myframe fIframe function 3. 这样A.html 就能通过 execB.html 调用 B.html 的fIframe方法了。 同理，B.html 需要调用A.html fMa

7、in方法，需要在B.html 嵌入与A.html 同域的 execA.html execA.html 里有调用 A.html fMain方法的js调用 javascript view plaincopy1. 2. parent.parent.fMain; / execute main function 3. 这样就能实现 A.html 与 B.html 跨域相互调用。 A.html html view plaincopy1. 2. 3. 4. 5. main window 6. 7. 8. 9. / main js function 10. function fMain 11. alert(m

8、ain 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.b

9、ody.appendChild(exec_obj); 22. else 23. exec_obj.src = http:/127.0.0.1/execB.html? + Math.random; 24. 25. 26. 27. 28. 29. 30. 31. A.html main 32. 33. 34. 35. B.html html view plaincopy1. 2. 3. 4. 5. iframe window 6. 7. 8. / iframe js function 9. function fIframe 10. alert(iframe function execute suc

10、cess); 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); 2

11、1. else 22. exec_obj.src = http:/localhost/execA.html? + Math.random; 23. 24. 25. 26. 27. 28. 29. 30. B.html iframe 31. 32. 33. execA.html html view plaincopy1. 2. 3. 4. 5. exec main function 6. 7. 8. 9. 10. parent.parent.fMain; / execute main function 11. 12. 13. execB.html html view plaincopy1. 2. 3. 4. 5. exec iframe function 6. 7. 8. 9. 10. parent.window.myframe.fIframe; / execute parent myframe fIframe function 11. 12. 13. 执行如下图： 源码下载地址：点击查看