iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理

JS是Web前端开发三要素之一，是郑州Web前端基础学习中非常重要的知识点。JS涉及的知识点多且杂，很多同学反映不知如何下手，事实上，只要你认真记、多练习，就可以慢慢掌握它。今天千锋郑州Web前端培训小编就给大家简单分享一下JS跨域知识点。

JS跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过JS获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。对于端口和协议的不同，只能通过后台来解决。

要解决跨域问题，你可以采用以下几种方法：

1、通过jsonp跨域

jsonp由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的json数据。

在JS中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的JS脚本文件却是可以的，jsonp正是利用这个特性来实现的。JS文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入，所以jsonp是需要服务器端的页面进行相应的配合。

2、通过修改document.domain来跨子域

浏览器都有一个同源策略，其限制之一是不能通过ajax的方法去请求不同源中的文档,第二个限制是浏览器中不同域的框架之间不能进行js的交互操作。

document.domain的作用就是将不同的url设置成相同的域名来实现跨域。需要注意的是document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。修改document.domain的方法只适用于不同子域的框架间的交互。

3、使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是HTML5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

4、使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中。

想获得更多郑州Web前端基础学习教程资料，你可以关注“千锋郑州校区”微信公众号，定期发布技术热点和行业动态。如果你想免费领取Web前端入门进阶全套教程资料，可以在公众号回复【我要教程】，参与“三人组团免费领教程”活动，名额有限，赶快行动吧！

iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理相关推荐

js跨域调用php接口,php的json格式和js跨域调用的代码
function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy','userage ...
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
Web前端入门学习之JS基础知识梳理汇总
Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错.不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业. 不过,学习要一步一个脚印,不能一口吃一个胖子 ...
前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化？
统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...
《Web前端》学习总结
<Web前端>学习总结第1章 HTML语言基础第2章表格与框架第3章表单第4章 CSS语言基础第5章 CSS页面布局第6章 JavaScript语言基础第7章 JavaS ...
html5移动web开发黑马掌上商城_月入35k大佬总结：web前端必须学习的内容（附全套前端教程）...
为了让学习变得轻松,高效!今天给大家分享一套教学资源,帮助大家在学习Web前端的道路上披荆斩棘,这套资源的领取方式请看文末优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面.交互代码的能力. ...
2023年Web前端开发学习路线图
目录前言第一阶段:新手入门 1.Web前端零基础入门HTML5+CSS3+前端项目 2.移动web开发实战第二阶段:技术进阶 1.JavaScript深入浅出-0基础入门神器 2.JavaScr ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...

iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理

iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理相关推荐

最新文章

热门文章