位置: 编程技术 - 正文
JavaScript使ifram跨域相互访问及与PHP通信的实例(js跳出if语句)
编辑：rootadmin推荐整理分享JavaScript使ifram跨域相互访问及与PHP通信的实例(js跳出if语句)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js向iframe内传参,js iframe跨域,如何让iframe可以跨域访问,js调用iframe里的方法,js向iframe内传参,js调用iframe里的方法,js iframe跨域,ifram跨域,内容如对您有帮助，希望把文章链接给更多的朋友！
iframe 与主框架相互访问方法
1.同域相互访问
假设A.html 与 b.html domain都是localhost （同域）A.html中iframe 嵌入 B.html，name=myframeA.html有js function fMain()B.html有js function fIframe()需要实现 A.html 调用 B.html 的 fIframe()，B.html 调用 A.html 的 fMain()
A.html
B.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 是 .0.0.1 （跨域）这里使用 localhost 与 .0.0.1 只是方便测试，localhost 与 .0.0.1已经不同一个域，因此执行效果是一样的。实际使用时换成 www.domaina.com 与 www.domainb.com 即可。A.html中iframe 嵌入 B.html，name=myframeA.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 " from accessing a frame with origin " Protocols, domains, and ports must match.
实现原理：因为浏览器为了安全，禁止了不同域访问。因此只要调用与执行的双方是同域则可以相互访问。
首先，A.html 如何调用B.html的 fIframe方法1.在A.html 创建一个 iframe2.iframe的页面放在 B.html 同域下，命名为execB.html3.execB.html 里有调用B.html fIframe方法的js调用
这样A.html 就能通过 execB.html 调用 B.html 的 fIframe 方法了。
同理，B.html 需要调用A.html fMain方法，需要在B.html 嵌入与A.html 同域的 execA.html execA.html 里有调用 A.html fMain 方法的js 调用
这样就能实现 A.html 与 B.html 跨域相互调用。
A.html
B.html
execA.html
execB.html
执行如下图：
php main 与 iframe 相互通讯类(同域/跨域)把main与iframe相互通讯的方法封装成类，主要有两个文件，JS：FrameMessage.js 实现调用方法的接口，如跨域则创建临时iframe，调用同域执行者。PHP：FrameMessage.class.php 实现接收到跨域请求时，根据参数返回执行方法的JS code。
功能如下：1.支持同域与跨域通讯2.传递的方法参数支持字符串，JSON，数组等。
FrameMessage.js
FrameMessage.class.php
A.html
execA.php 与 execB.php
js实现文字滚动效果 首先先看一下大致效果图，因为是动态的，在页面无法显示出来。具体的实现代码如下：1.首先是css代码：styletype="text/css"body,ul,li,a,p,div{padding:0px;margin:0p
基于Javascript实现二级联动菜单效果 本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码，具体内容如下效果图如下：具体实现步骤如下：1.所用js代码如下：scripttype="text/javascr
javascript实现移动端上的触屏拖拽功能 本文是分享了javascript实现移动端上的触屏拖拽功能，具体内容如下效果图：实现代码：!DOCTYPEhtmlhtmlheadmetacharset="utf-8"title/titlemetaname="viewport"content="width=d
标签: js跳出if语句
本文链接地址:https://www.jiuchutong.com/biancheng/379041.html 转载请保留说明！
