由于安全方面的考虑，Javascript被限制了跨域访问的能力，但是有时候我们希望能够做一些合理的跨域访问的事情，那么怎么办呢？
这里分两类情况：
一、基于同一父域的子域之间页面的访问；参见如下3个domain域：taobao.com、jipiao.taobao.com、promotion.taobao.com；它们有相同的父域taobao.com。
二、基于不同父域页面之间的访问；参见如下3个domain域：taobao.com、baidu.com、sina.com.cn；它们具有不同的父域。
解决它们之间跨域的方案有：
方案1：服务器Proxy
域A的页面JS需要访问域B下的链接获取数据，该方案在域A的服务器端建立一个Proxy程序(可能是ASP、servlet等任何服务端程序)，域A的页面JS直接调用本域下的Proxy程序，proxy程序负责将请求发送给域B下的链接并获取到数据，最后再通过Proxy将数据返回给页面JS使用。
经过的访问流程就是： 域A下JS --> 域A 下Proxy -- > 域B下的链接
例子：
第一步：
域A: http://Jipiao.taobao.com/test.htm
页面上javascript脚本：
<mce:script type="text/javascript"><!--
Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下代理地址
var callback =
{
success: function(res) { alert(res.responseText); },
failure: function(res) { alert('failure');},
argument:{}
}
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
// --></mce:script>
第二步：
完成域A服务端的Proxy程序(这里假定是一个servlet)，伪码如下：
Public class Proxy extends …….{
..doGet(……..){
HttpClient client=……;
GetMethod get=new GetMethod("www.baidu.com/xxxxx.do");//访问域B的链接
int statusCode = client.executeMethod(get);
if (statusCode != HttpStatus.SC_OK) {
byte[] responseBody = get.getResponseBody();
String res=new String(responseBody);
Httpresponse.getWriter().write(res);//将数据返回给域A
}
}
}
方案2：通过Script标签:
在域A页面http://Jipiao.taobao.com/test.htm 的head中写一个空的Script标签：
<html>
<head>
<mce:script id="remoteScript" type="text/javascript" src=""/><!--
<head>
<body>
<script type="text/javascript" >
Var remoteScript=document.getElementById("remoteScript");
remoteScript.src="www.baidu.com/xxxxx.do";//域B的链接
alert(remote.test);//使用域B返回的JSON数据
alert(f[0]);
// --></mce:script>
</body>
</html>
注意：这种方案要求域B返回的数据必须是合法的JSON格式或者如JS文件的格式；比如域B返回的数据格式如下：
Var remote={test:’hello’};
Var f=[2,1];
方案3：隐藏iframe、共享domain:
即域A页面http://jipiao.taobao.com/yyyy.htm 的页面上写一个隐藏的iframe：
<html>
<head>
<head>
<body>
<mce:script type="text/javascript" ><!--
Document.domain="taobao.com";
Var remoteHtml=document.getElementById("remoteHtml");
remoteHtml.src="promotion.taobao.com/xxxx.htm";//这里访问域B的链接
var document=remoteHtml.ContentDocument; //这里就可以使用document来操作域B中页面xxx.htm的数据了
// --></mce:script>
<iframe id="remoteHtml" src="" style="diapay:none" mce_style="diapay:none"/>
</body>
</html>
注意：这里http://promotion.taobao.com/xxxx.htm 页面也需要设置document.domain="taobao.com"， 这种方法才能奏效。
之所以这种iframe的方法不适合不同父域之间的跨域，是因为设置document.domain只能设置为自己的父域，而不是能设置为其他域，例如:jiapiao.taobao.com只能设置document.domain="taobao.com"，而不能是document.domain="baidu.com"；
这里列举的三种方案各有优缺点：
Proxy方案优点是可以适用用于几乎所有的跨域访问，而且只需要要一个域中进行开发，另一个域可以提供任何类型格式的数据。缺点是这种方案经过了中间Proxy，所以延迟可能稍微大一点，并且会加重本域服务器的负荷，开发工作量也稍微大一点。
Script标签的方案可以说是非常简单的，不用几行代码就搞定了事，不过它对返回的数据格式要求有点严格，只能是Json格式数据,如果是其他格式的数据，那么这种方法就无能为力了。
隐藏iframe方式也很简单，它可以处理任何返回的数据格式，但它只适用在具有同一个父域下的跨域请求上，并且要求其他域得配合开发，即需要设置document.domain。
分享到：
相关推荐
- **事件监听**：为了接收从`iframe`或其他窗口发来的消息，`crossUtils.js`还添加了一个事件监听器，监听`window`上的`message`事件。当接收到消息时，根据消息中的`signal`字段调用相应的回调函数处理数据，并可...
6. `selectUser.js`: 主要的JavaScript源码，实现了跨框架获取元素位置的功能。 在`selectUser.js`中，开发者可能使用了递归方法来遍历所有框架，查找目标元素并计算其位置。递归的关键在于，每次进入一个iframe，...
`iframe`可以跨越同源策略限制，实现跨域通信，如使用`window.postMessage`方法，允许父页面与`iframe`之间的数据传递。 ```javascript // 父页面向iframe发送消息 window.postMessage(data, 'http://example.com')...
Lightbox通常与JavaScript库如jQuery结合使用，这里提到了`jquery.lightbox-0.5.js`和`jquery.lightbox-0.5-iframe.js`，这两个文件可能分别是Lightbox的基本版本和一个专为iframe环境优化的版本。`jquery.lightbox-...
这两个页面中可能包含了JavaScript代码，用于初始化iframe，设置通信接口，并调用`FrameMessage.js`和`json2.js`这两个JavaScript库。 `FrameMessage.js`可能是JavaScript实现的通信接口，它可能使用了`window.post...
需要将proxy.html放到与内嵌的iframe页同域的服务下, 并且可以被访问到. 使用 支持2种调用方式: 使用 postMessage 和 URL params. postMessage 该方法需要使用 JSON.stringify 将对象转为字符串. // React function...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> <script type="text/javascript"> $(document).ready(function() { $("#button").click(function() { $("#content").load("index....
例如，一个源（域名、协议和端口）的JavaScript无法读取另一个源的文档内容。然而，有些情况下我们需要跨越这个限制，比如在一个应用中嵌入第三方服务或者实现单点登录等。 描述中提到的链接指向了一篇博客文章，...
在后端，开发人员需要配置服务器响应头以支持CORS，例如在Node.js中使用`cors`中间件，或在Java的Spring框架中使用`@CrossOrigin`注解。 总结，Ajax跨域请求涉及浏览器的同源策略、CORS、JSONP、POSTMessage等多个...
通过这种方式，iFrame成为了跨越域限制的桥梁，使得不同域间的交互成为可能。 总结，iFrame在网页开发中扮演着重要的角色，尤其是在处理弹出层遮罩和跨域数据交换的问题上。尽管现代浏览器已经提供了更多高级功能来...
5. **多级嵌套与iframe支持**：由于`iframe.html`文件的存在，ymPrompt可能已经考虑到了在iframe环境中的使用情况，允许消息提示跨越iframe边界，提供跨页面的通信能力。 6. **源码分离**：`ymPrompt_source.js`...
总结起来，`contentWindow`和`contentDocument`是JavaScript在处理`iframe`时不可或缺的工具，它们帮助开发者跨越`iframe`边界，实现跨窗口的通信和DOM操作，确保页面的动态响应和用户体验。在实际开发中，务必注意...
比如在跨越多个iframe的情况下，每个iframe都有自己的全局对象和构造函数，instanceof可能无法正确判断两个不同iframe中同名构造函数的实例关系。此外，在某些情况下，instanceof运算符可能不够精确或不够灵活，因此...
再者，Nuxt3还引入了Teleport功能，使得组件可以被渲染到页面上的任意位置，甚至可以跨越iframe边界，这在处理复杂布局或嵌入式组件时非常有用。 资源包中的“j-book-demo_main.zip”可能是一个示例项目，它包含了...
然而，在某些情况下，如前后端分离的开发模式或者需要获取第三方API数据时，我们需要跨越这个限制。本文将详细介绍在后台使用JSP实现Ajax跨域的方法。 1. **通过JSONP（JSON with Padding）** JSONP是一种绕过同源...
这确保了每个`<iframe>`的样式只在其自身的作用域内生效，不会跨越边界。 2. **限制样式属性**：开发者可以设置特定的样式属性禁用，如`display`、`position`等，以防止恶意代码通过这些属性改变页面布局。 3. **...
此外，可以创建一个隐藏的iframe，将GridView的内容复制到iframe中，然后调用iframe的打印功能，避免打印整个网页。 3. 自定义打印模板：如果默认的打印效果不理想，可以创建一个专门的打印模板，包含所有需要打印...
Thickbox是一款基于JavaScript和CSS的轻量级弹出层插件，它的核心功能是能够在网页上创建全屏或半屏的模态对话框，用于展示图片、HTML内容、IFrame甚至是Ajax加载的内容。它的设计理念是提供一种优雅的方式来展示...
此外，引入文件的概念也适用于HTML，可以使用`<link>`标签引入CSS样式表，`<script>`标签引入JavaScript文件，甚至通过`<iframe>`引入整个网页。 总结来说，引入文件是编程中的一项基本操作，它使得代码能够跨越...
然而，z-index仅在同一类元素（有窗口或无窗口）之间生效，无法跨越类别调整有窗口和无窗口元素的相对位置。 鉴于浏览器的差异性和z-index的限制，一个可行的补救策略是通过JavaScript或jQuery等脚本语言动态地改变...