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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title> main window </title>

  <script type="text/javascript">

  // main js function

  function fMain(){

	alert('main function execute success');

  }

  // exec iframe function

  function exec_iframe(){

	window.myframe.fIframe();

  }

  </script>

 </head>

 <body>

  <p>A.html main</p>

  <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>

  <iframe src="B.html" name="myframe" width="500" height="100"></iframe>

 </body>

</html>

B.html

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title> iframe window </title>

  <script type="text/javascript">

  // iframe js function

  function fIframe(){

	alert('iframe function execute success');

  }

  // exec main function

  function exec_main(){

	parent.fMain();

  }

  </script>

 </head>

 <body>

  <p>B.html iframe</p>

  <p><input type="button" value="exec main function" onclick="exec_main()"></p>

 </body>

</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已经不同一个域，因此执行效果是一样的。

实际使用时换成 www.domaina.com 与 www.domainb.com 即可。

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调用

<script type="text/javascript">

parent.window.myframe.fIframe(); // execute parent myframe fIframe function

</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 调用

<script type="text/javascript">

parent.parent.fMain(); // execute main function

</script>

这样就能实现 A.html 与 B.html 跨域相互调用。

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title> main window </title>

  <script type="text/javascript">

  // main js function

  function fMain(){

	alert('main function execute success');

  }

  // exec iframe function

  function exec_iframe(){

	if(typeof(exec_obj)=='undefined'){

		exec_obj = document.createElement('iframe');

		exec_obj.name = 'tmp_frame';

		exec_obj.src = 'http://127.0.0.1/execB.html';

		exec_obj.style.display = 'none';

		document.body.appendChild(exec_obj);

	}else{

		exec_obj.src = 'http://127.0.0.1/execB.html?' + Math.random();

	}

  }

  </script>

 </head>

 <body>

  <p>A.html main</p>

  <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>

  <iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe>

 </body>

</html>

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title> iframe window </title>

  <script type="text/javascript">

  // iframe js function

  function fIframe(){

	alert('iframe function execute success');

  }

  // exec main function

  function exec_main(){

	if(typeof(exec_obj)=='undefined'){

		exec_obj = document.createElement('iframe');

		exec_obj.name = 'tmp_frame';

		exec_obj.src = 'http://localhost/execA.html';

		exec_obj.style.display = 'none';

		document.body.appendChild(exec_obj);

	}else{

		exec_obj.src = 'http://localhost/execA.html?' + Math.random();

	}

  }

  </script>

 </head>

 <body>

  <p>B.html iframe</p>

  <p><input type="button" value="exec main function" onclick="exec_main()"></p>

 </body>

</html>

execA.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title> exec main function </title>

 </head>

 <body>

 	<script type="text/javascript">

		parent.parent.fMain(); // execute main function

	</script>

 </body>

</html>

execB.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title> exec iframe function </title>

 </head>

 <body>

	<script type="text/javascript">

		parent.window.myframe.fIframe(); // execute parent myframe fIframe function

	</script>

 </body>

</html>

执行如下图：

web项目跨域访问的更多相关文章

  1. Web Api跨域访问配置及调用示例

    1.Web Api跨域访问配置. 在Web.config中的system.webServer内添加以下代码: <httpProtocol> <customHeaders> &l ...

  2. JAVA - SpringBoot项目跨域访问

    JAVA - SpringBoot添加支持CORS跨域访问 CORS(Cross-Origin Resource Sharing)“跨域资源共享”,是一个W3C标准,它允许浏览器向跨域服务器发送Aja ...

  3. Web API 跨域访问（CORS）

    1.在web.config里把“    <remove name="OPTIONSVerbHandler" />  ”删掉. 2. 到nuget上装一个包:    ht ...

  4. ssm项目跨域访问

    最近使用ssm开发了一个项目,为了项目的开发速度,采用的是前后端同时开发,所以前端文件没有集成在项目中,最后在调试时涉及到了跨域.跨域的解决方法很多,我采用的是最简单的一种,代码如下: 新建一个过滤器 ...

  5. ASP.NET Web API 跨域访问（CORS）

    一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...

  6. 两个java项目,跨域访问时,浏览器不能正确解析数据问题

    @Controller@RequestMapping(value = "api/item/cat")public class ApiItemCatController { @Aut ...

  7. ASP.NET Web API 跨域访问（CORS）要注意的地方

    一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...

  8. ASP.NET Web API 跨域访问

    自定义特性 要在WebApi中实现JSONP,一种方式是实现自定义特性  http://stackoverflow.com/questions/9421312/jsonp-with-asp-net-w ...

  9. web api 跨域访问

    在工程中 Install-Package Microsoft.AspNet.WebApi.Cors 在 webapiconfig.cs中 config.EnableCors(); 在 控制器中, [E ...

随机推荐

  1. （3）选择元素——（15）总结（Summary）

    With the techniques that we have covered in this chapter, we should now be able to locate sets of el ...

  2. 【VS2015正式版下载】Visual Studio 2015 正式版开放下载 Visual Studio 2015 神key

    说明: 微软定于2015年7月20日发布Visual Studio 2015正式版,目前其官方网站已经提供正式版本的下载. 可在https://www.visualstudio.com/en-us/d ...

  3. C# Socket传输大文件

    1.基础类TransferFiles,client和server都需要 using System; using System.Collections.Generic; using System.Tex ...

  4. 64位系统 IIS不支持 Excel导入的问题

    64位系统不支持读取excel的问题: 应用程序池-常规选项 启用32应用程序 启用23应用程序是为了保证32应用程序能够正常运行

  5. ORA-04021

    编译或删除存储过程的时候,系统会卡住,一段时间后出现ora-04021错误. 1.可能被锁住查看v$locked select b.sid,b.serial#,b.machine,b.terminal ...

  6. cocos2dx SpriteBatchNode 精灵的渲染优化类

    用处是减少对精灵的渲染次数,用法如下 SpriteFrameCache::getInstance()->addSpriteFramesWithFile("person.plist&qu ...

  7. php 邮件发送代码-php邮件群发

    php 邮件发送如何进行的呢? php邮件发送是通过smtp协议进行的. 下面是一个php邮件发送的类的一个函数. 文件下载 function sendmail($to, $from, $subjec ...

  8. zepto源码研究 - deferred.js（jquery-deferred.js）

    简要:zepto的deferred.js 并不遵守promise/A+ 规范,而在jquery v3.0.0中的defer在一定程度上实现了promise/A+ ,因此本文主要研究jquery v3. ...

  9. UVALive 5792 Diccionário Portuñol

    字符串匹配问题 有n个a串个m个b串,讲a的前缀和b的后缀粘在一起有多少个不同的新串. 首先求不同的前缀和后缀肯定好求了,就用字典树分别存一下a个倒过来的b. 那个问题就是解决例如,abcd,和bcd ...

  10. js获取鼠标选中的文字

    1.获取选中的文字: document.selection.createRange().text; IE9以下使用 window.getSelection().toString(); 其他浏览器使用 ...