浏览器的跨域访问
一、浏览器介绍
对于Web应用来说，浏览器是最重要的客户端。
目前浏览器五花八门多得不得了，除了Chrome、IE、Firefox、Safari、Opera这些国外的浏览器外，百度、腾讯、360、淘宝、搜狗、傲游之类的，反正能做的都做了。
浏览器虽然这么多，但浏览器内核主要就以下4种：
1.Trident：IE使用的内核。
2.Gecko：Firefox使用的内核。
3.WebKit：Safair和Chrome使用的内核。WebKit由苹果发明，Chrome也用了，但是Google又开发了V8引擎替换掉了WebKit中的Javascript引擎。
4.Presto：Opera使用的内核。
国内的浏览器基本都是双核浏览器，使用基于WebKit的内核高速浏览常用网站，使用Trident内核兼容网银等网站。
二、同源策略
同源策略是浏览器最基本的安全策略，它认为任何站点的内容都是不安全的，所以当脚本运行时，只被允许访问来自同一站点的资源。
同源是指域名、协议、端口都相同。
如果没有同源策略，就会发生下面这样的问题：
恶意网站用一个iframe把真实的银行登录页放到他的页面上，当用户使用用户名密码登录时，父页面的javascript就可以读取到银行登录页表单中的内容。
甚至浏览器的1个Tab页打开了恶意网站，另一个Tab页打开了银行网站，恶意网站中的javascript可以读取到银行网站的内容。这样银行卡和密码就能被轻易拿走。
三、跨域访问
由于同源策略的原因，浏览器对跨域访问做了很多限制，但有时我们的确需要做跨域访问，那要怎么办？主要有以下几种情况：
1. iframe的跨域访问
同域名下，父页面可以通过ElementById(‘_iframe’).contentWindow.document访问子页面的内容，但不同域名下会出现类似下面的错误：
iframe参数传递
Uncaught SecurityError: Blocked a frame with origin “” from accessing a frame with origin “”. Protocols, domains, and ports must match.
有两种解决方法：
1). 当主域名相同，子域名不同时，比较容易解决，只需设置相同的document.domain即可。
如a./a.html使用iframe载入b./b.html，且在a.html中有Javascript要修改b.html中元素的内容时，可以像下面的代码那样操作。
a.html
<html>
<head>
<script>
document.domain = '';
function changeIframeContent() {
var _iframe = ElementById('_iframe');
var _p = _ElementById('_p');
_p.innerHTML = 'Content from a.html';
}
</script>
</head>
<body>
<iframe id="_iframe" src="b./demo/iframe/subdomain/b.html"></iframe>
<br>
<input type="button" value="Change iframe content" onclick="changeIframeContent();"/>
</body>
</html>
b.html
<html>
<head>
<script>
document.domain = '';
</script>
</head>
<body>
<p id="_p">b.html</p>
</body>
</html>
2). 当主域名不同时，就非常麻烦了。大致的方法像下面描述的那样：
∙下有a.html；
∙a.html创建iframe加载下的b.html，可在加载b.html时通过?或#将参数传递到b.html中；
∙b.html加载后，可以通过提取location.search或location.hash中的内容获取a.html传过来的参数；
∙b.html创建一个iframe，加载下的c.html，并且参数也通过?或#传给c.html；
∙因为c.html和a.html是相同域名，所以c.html可以使用parent.parent访问到a.html的对象，这样也就可以将b.html需要传递的参数传回到a.html中。
2. Ajax的跨域访问
Ajax主要通过XMLHttpRequest对象实现，但是如果通过XMLHttpRequest访问不同域名下的数据，浏览器会出现类似下面的错误：
XMLHttpRequest cannot load /demo/iframe/ajax/b.html. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘’ is therefore not allowed access.
这时可由以下两种方法解决：
1). 使用<script>代替XMLHttpRequest，也就是JSONP的方法。利用<script>标签的src下加载的js不受同源策略限制，并且加载后的js运行在当前页面的域下，所以可自由操作当前页面的内容。
下面的代码演示了在下的a.html通过下的b.js中的内容来更新自身的p标签。
a.html
<html>
<head>
<script>
function update_p (content) {
ElementById("_p").innerHTML = content;
}
function getFromB() {
var _script = ateElement("script");
_pe = "text/javascript";
_script.src = "/demo/ajax/b.js";
ElementsByTagName("head")[0].appendChild(_script);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。