一. jsonp方法

1. 原理

在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的。

2. 格式

<script>

  function doSomething(jsondata) {

    //todo

};

</script>

<script>http://example.com/data.php?callback=doSomething</script>

二. 使用HTML5中新引进的window.postMessage方法来跨域传送数据

1. 获取window对象。 例如:var winObj = element.contentWindow;

2. 格式

//a.html

<script>

function onload() {

  var iframe = document.getElementById('iframe');

var winObj = iframe .contentWindow;

  winObj .postMessage('哈哈,我是来自页面a的消息','*');

}

</script>

<iframe>id = "iframe" src = "http://www.test.com/b.html"  οnlοad="onload()"</iframe>

//b.html

<script>

  window.onmessage = function(e) {

    e = e || event;

    alert(e.data);  // postMessage()方法存储在了data里了

}

</script>

转载于:https://www.cnblogs.com/beesky520/p/4649886.html

201507152326_《Javascript实现跨域有4种方法——介绍jsonp和html5方法》相关推荐

  1. 只有ajax会跨域吗_ajax处理跨域有几种方式

    jQuery 使用 JSONP 缺点: 1.这种方式无法发送post请求(这里) 2.另外要确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定. 跨域的几种方式 在项目中可能 ...

  2. vb跨域访问ajax,解决AJAX的跨域访问-两种有效示例

    这篇文章主要为大家详细介绍了解决AJAX的跨域访问-两种有效示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧!新的W3C策略实现了HTTP跨域访问,还 ...

  3. SpringBoot解决跨域的5种方式

    本文来说下SpringBoot中实现跨域的5种方式. 文章目录 什么是跨域 java解决CORS跨域请求的方式 返回新的CorsFilter(全局跨域) 重写WebMvcConfigurer(全局跨域 ...

  4. 解决前端跨域的几种方法

    解决前端跨域的几种方法 了解跨域出现的原因 解决跨域的几种方法 想要解决跨域 先要知道为什么会出现跨域 跨域:指的是浏览器不能执行其他网站的脚本 它是由浏览器的同源策略造成的 是浏览器对javascr ...

  5. 什么是同源策略及解决跨域的三种方式

    同源策略 1.1.1 所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源.同源策略/SOP(Same origin policy)是一种约 ...

  6. 前端交互之“解决前端跨域的三种方法”

    1.什么是前端跨域? 跨域是浏览器为了安全而做出的限制策略:浏览器请求必须遵从同源测试: http://www.bilibili.com:8080:/anime/?key=calue路径 键值对 同协 ...

  7. vue开发环境和生产环境里面解决跨域的几种方法

    vue开发环境和生产环境里面解决跨域的几种方法 参考文章: (1)vue开发环境和生产环境里面解决跨域的几种方法 (2)https://www.cnblogs.com/pass245939319/p/ ...

  8. jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求

    推荐一个读者做的不错的编程学习网站: 网站:潜安 域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇 问题由来: 最近一直在优化 ...

  9. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  10. Springboot 解决跨域的四种姿势

    Springboot 解决跨域的四种姿势 姿势一 实现WebMvcConfigurer#addCorsMappings的方法 import org.springframework.context.an ...

最新文章

  1. 【 FPGA 】序列检测器的Mealy状态机实现
  2. html标签库jar包,struts2的s标签库jar包
  3. SQLite数据库Java驱动下载及连接示例(sqlite-jdbc-3.30.1.jar)
  4. java xml 反射_java使用dom4j解析xml配置文件实现抽象工厂反射示例
  5. git基础用法(一)
  6. DevExpress控件GridControl中的布局详解 【转】
  7. miui替换官方文件解决无服务器,miui 关掉云服务器
  8. cacti无密码登录
  9. 请求网页时,怎么给我返回了一段 JavaScript 代码
  10. 红帽RHEL8和RHEL7有什么区别?
  11. ios学习8_KVC和字典转模型
  12. mysql 存储过程写入文件
  13. 信号峰峰值Vpp与功率和dbm的换算
  14. ofdm导频信道估计matlab,OFDM导频信道估计
  15. jieba分词词性对照表
  16. 多项创新功能驱动,Galaxy S9必将引爆2018智能手机市场
  17. Ubuntu上软件安装
  18. 关于安卓版微信群发软件如何设置微信自动更新!
  19. 未来5年内, UWB技术或将成为室内定位的主流技术!
  20. CAM 导入.rou钻孔文件时提示No header % found或者显示与实际尺寸偏差大

热门文章

  1. fantastical2语言设置_如何为iPhone定制Fantastical2以适应您的需求
  2. 【cf:1100F】 Ivan and Burgers(多次区间最大异或值查询----线性基+离线+思维)
  3. java字符串截取删除_字符串截取的常用方法
  4. C/C++[算法入门]续
  5. 翻译: 4.3. 多层感知器的简明实现MLP pytorch
  6. 算法:全一子串的数量 或 全零子串的数量 1513. Number of Substrings With Only 1s
  7. 算法:插入排序、归并排序、快速排序、堆排序
  8. 算法:Reverse String(反转字符串)
  9. 怎么看神经网络过早收敛_遗传算法的收敛性分析
  10. mysql手动编译安装_手动编译安装Mysql