javascript 跨域调用js文件问题.....
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 跨域调用js文件问题.....相关的知识，希望对你有一定的参考价值。
我现在正在做一个项目..但是现在卡在了一个跨域调用js文件的问题上面了...我早本地的js方法里边写的是实现实例化一个js文件里边的一个对象 例如：var aaa=new bbb（）；
然后操作bbb里边的变量...但是引用的这个js文件也就是bbb所在的js文件时另一个服务器上的...我是这样易用的：<script type=text/javascript src=192.168.1.100/....></script>但是一运行就出错了..好像是因为跨域的问题就产生了这个问题..而且在本地实例化对象的时候会运行这个js文件 js文件是在服务器上...请问高手怎么解决这个问题啊...很急用...没有积分了...见谅啊....
三种方法实现js跨域访问
1.基于iframe实现跨域
基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数，代码如下：
页面一代码：<html>
<head>
<script>
document.domain = "xx.com";
function aa()
alert("p");
</script>
</head>
<body>
<iframe src="http://localhost:8080/cmsui/2.html" id="i">
</iframe>
<script>
document.getelementbyid(\'i\').oncg = function()
var d = document.getelementbyid(\'i\').contentwindow;
d.a();
;
</script>
</body>
</html>页面二代码：
<html>
<head>
<script>
document.domain = "xx.com";
function a()
alert("c");
</script>
</head>
<body>
</body>
</html>
这时候父页面就可以调用子页面的a函数，实现js跨域访问
2.基于script标签实现跨域
script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建script标签，代码如下
var script = document.createElement(\'script\');script.src = "http://aa.xx.com/js/*.js";
document.body.appendChild(script);
这样通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档，只能是js文件，jsonp便是通过这种方式实现的，jsonp通过向其它域传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案
3.后台代理方式
这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域
参考技术A <script type=text/javascript src=“xxxxx.js”/....></script>这样引用是没有域跨问题的。
google code hosting也都是这样引用 的。
主要还是看域跨引用的这个脚本文件有没有相互DOM操作或相互赋值操作。 参考技术B 现在的问题是，如何在Left中调用Top中的javascript方法，或者是用什么方法在当然可以，请前提条件是这几个文件不能跨域，就是要在一个域名下，否则JS 参考技术C 你试试在js里动态加载js的方法呢，百度下，第一个百度文库的文档下载下来，用里边的第四种方法
或者用jsonp的方式来回搂js的值
JavaScript入门
JavaScript入门篇—JSONP的应用
什么是JSONP
个人理解：将服务器端返回的json数据封装成JavaScript对象，非正式传输协议。
JSONP解决了什么问题
Ajax不支持跨域请求。JavaScript在请求ajax的时，URL的请求域名和当前页面完全一致。跨域是指：协议、域名、端口一致。而JSONP的出现解决了跨域请求。
JSONP为什么可以解决跨域请求
Web页面调用JS文件时不受跨域的影响，还有拥有src这个属性的标签也一样不受跨域影响。<script>、<img>、<iframe>，而且<script>标签里的内容会被自动执行。因此在服务端把json数据封装成一个JavaScript对象。
JSONP的使用
以http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice为例
- 服务器端创建JavaScript对象(类似这样)：
String callbackFunction=request.getParameter(“callback”); //获取回调方法名refreshPrice
//将json数据封装成JavaScript对象refreshPrice({"0000001":{"code": "0000001", ...} });
Return result=callbackFunction+”(“+json+”)”;
- 在JavaScript中准备回调函数refreshPrice (data).
function refreshPrice(data) {
var p = document.getElementById(‘test-jsonp‘); p.innerHTML = ‘当前价格：‘ + data[‘0000001‘].name +‘: ‘ + data[‘0000001‘].price + ‘；‘ + data[‘1399001‘].name + ‘: ‘ + data[‘1399001‘].price;}
- 给页面动态添加<script>
function getPrice() {
var js = document.createElement(‘script‘), head = document.getElementsByTagName(‘head‘)[0]; js.src = ‘http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice‘; head.appendChild(js);}这个function被执行时，在head标签里追加
<script src="http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice"></script>。
当web页面被加载执行该<script>时，相当于执行<script>refreshPrice({"0000001":{"code": "0000001", ... });<script>
而<script>里的内容会被自动执行，此时调用准备好的refreshPrice回调函数获取json数据。
以上是关于javascript 跨域调用js文件问题.....的主要内容，如果未能解决你的问题，请参考以下文章
如何通过js跨域调用ASP.NET Web API （请问如何实现在javascript中通过http get的方式跨域调用ASP.NET Web API？）