文档章节

js跨域通讯

一行代码
 一行代码
发布于 2015/10/28 09:24
字数 644
阅读 19
收藏 0

使用script、img等标签元素可以直接引用外域的文件,如我们可以直接引用百度开放云平台上的jqurey:

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

当本域的html加载了外域的的js文件后,会立即执行其里面的语句,如:

js文件(1.js):

alert("这是在外部加载进来的弹窗");

html文件:

 <script src="http://xxxxxxx/1.js"></script>

可以发现,当页面刷新,1.js文件加载进来后,会出现弹窗。

因此,当我们需要传回数据时,可以直接在外部js文件里定义一个变量,然后在本域的html文件里引用即可。

js文件:

var returnValue="我是返回的数据";

html文件:

<script src="http://xxxxxxx/1.js"></script> 
<script>alert(returnValue);</script>

 测试可发现,页面加载后能正确弹出返回值。通过浏览器的开发者工具可以看到,页面加载完成后实际变成了这样子:

<script src="http://xxxxxxx/1.js">var returnValue="我是返回的数据";</script> 
<script>alert(returnValue);</script>

这样的话会将返回值直接暴露在全局作用域里,因此我们可以将返回值写成一个函数,然后在需要的时候直接调用:

js文件:

function ExternalFunction(){
   return "返回的数据";
}

html文件:

<script src="http://xxxxxxx/1.js"></script> 
<script>alert(ExternalFunction());</script>

但是这样还是会将这个函数暴露在全局作用域里,因此最好还是写成立即执行函数表达式。

考虑到src指向的只是一个url,不一定是js文件,所以我们可以写一个服务页,然后在本域的html文件里,先自定义的一个函数,并且将这个函数名发给这个服务页,再在这个服务页的立即执行函数里调用这个函数:

外部的php文件:

<?php
$var_char = "return value";


$fun="(function(){var value='".$var_char."';".$_GET["functionName"]."(value);})();";


echo $fun;
?>

本域的html文件:

<script>function MyFunction(value){alert(value);}</script>

<script src="http://localhost:8080/1.php?functionName=MyFunction"></script>

当外部的php返回数据后,本域的html文件实际上变成:

<script>function MyFunction(value){alert(value);}</script>
<script src="http://localhost:8080/1.php?functionName=MyFunction">
(function(){var value='return value';MyFunction(value);})();
</script>

这样便成功使用js进行跨域通讯。此外,还可以用js动态生成这个访问外部服务页的script标签,访问完成后再删除这个script标签,这样可以提高灵活性,做到在需要的时候才引用外部的数据。

另外,还可以使用jqurey来进行跨域通讯。

© 著作权归作者所有

一行代码
粉丝 2
博文 18
码字总数 13190
作品 0
中山
私信 提问
JSONP原理优缺点(只能GET不支持POST)

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕...

BearCatYN
2015/06/04
870
0
关于JavaScript“跨域”问题的总结

什么是同源策略? 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以...

红薯
2010/04/20
2.9K
5
用jQuery与JSONP轻松解决跨域访问的问题

跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问...

烽穹寒渊
2015/07/26
0
0
面试 | Ajax进阶----jQuery中的Ajax(下)

剩下的两个API: 1.$.getScript()是动态获取js代码的 有时候我们看到在网上看到的一些效果,找不到对应js文件,那就说明有可能是动态获取js代码了。 $.getScript(url,callback) - 动态读取脚...

一个敲代码的前端妹子
2018/06/28
0
0
JavaScript跨域问题解决办法

一、什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下...

谢思华
2015/08/24
225
0

没有更多内容

加载失败,请刷新页面

加载更多

链表中环的入口节点

给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null。 思路: public ListNode EntryNodeOfLoop(ListNode pHead) { if (pHead == null || pHead.next == null) ...

Garphy
7分钟前
2
0
Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法

上一篇:Spring5 源码分析-容器刷新-prepareBeanFactory()方法 该方法主要完成以下功能: 1.实例化ConfigurationClassPostProcessor,并调用ConfigurationClassPostProcessor.postProcessBe...

特拉仔
8分钟前
3
0
为什么MySQL用B+树做索引

索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整。本文就来从头到尾介绍下数据库的索引。...

小致Daddy
33分钟前
4
0
网站前台的三级联动数据封装

我在进行项目时候遇到了一个进行数据封装的一个功能,进行数据的封装的功能也挺复杂,来回试了好几十种方法.最后使用的是这种方法. 使用一个pojo进行封装两个数据,一个是list一个是实体类. 具体...

小天丶羽
35分钟前
4
0
创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA的SPI FLASH、硬件加密芯片

TL437xF-EVM是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA设计的开发板,底板采用沉金无铅工艺的4层板设计,尺寸为240mm*130mm,它为用户提供了SOM-TL437xF核心板的测...

Tronlong创龙
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部