jsiframe跨域请求_如何用javascript 跨域获取iframe子页面的元素信息

A. 如何用javascript 跨域获取iframe子页面的元素信息

在当前页面写js：

<script>
function GridSearch() {
var ifr = document.getElementById('Soft_Iframe');//Soft_Iframe是iframe的id
var win = ifr.window || ifr.contentWindow;
win.FilterSearch();//是iframe里面的js方法，相当于执行子页面的内容。

}
</script>

然后在iframe里面显示的那个页面上写js方法：
<script>
function FilterSearch(){
//这里面写你要获得当前页面元素的信息。
}
</script>

B. js 简单使用postMessage iframe跨域通信

postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.

要发送到其他窗口的数据,它将会被 !结构化克隆算法序列化.这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.

通过窗口的origin属性来指定哪些窗口能接收到消息事件,指定后只有对应origin下的窗口才可以接收到消息,设置为通配符"*"表示可以发送到任何窗口,但通常处于安全性考虑不建议这么做.如果想要发送到与当前窗口同源的窗口,可设置为"/"

是一串和message同时传递的 Transferable 对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权.

下面是打印出的结果 data属性为传输过来的数据

若用到的地方很多建议加上 targetOrigin 属性并且给数据加好type确保数据正确的被接收

欢迎对这个有研究、有兴趣或者发现文章有错误的地方的伙伴们和我交流,共同进步~~~

C. iframe跨域通信方案

概述

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

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

对于主域相同子域不同的通信方法这里不一一列举了，这里主要讲解一下跨主域的通信问题。

postMessage方法

window.postMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的主机（两个页面的 document.domain 的值相同）。在正确使用的情况下，window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

兼容性

http://caniuse.com/#search=postMessage

具体用法

发送消息：destination.postMessage(message, targetOrigin);

destination: 目标窗口

message:发送的消息

targetOrigin: 定义发送消息的范围

监听接受消息：window.addEventListener(‘message’,callback,false);

已知问题

部分版本IE8/9浏览器只支持iframe通信，不支持tabs之间通信。

IE8/9不能传输对象，只能传输string。

参考资料

mozlia官方文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage

IE官方文档: https://status.modern.ie/postmessage

webplatform文档: https://docs.webplatform.org/wiki/apis/web-messaging/MessagePort/postMessage

HTML5官方文档: https://html.spec.whatwg.org/multipage/comms.html#web-messaging

window.navigator(适用于ie6/7)

ie6/7有个漏洞,父窗口与所有的iframe共享window.navigator对象，可以利用这个漏洞，由于ie6/7不支持postMessage,所以可以利用这个漏洞对ie6/7做兼容跨域通信支持。

具体用法

途中A过程和B过程都是初始化监听事件，类似于onmessage事件。只不过实现方法不一样而已。

按执行顺序来描述的话，如下：

B: 父窗口向window.navigator添加一个监听函数，并打上父窗口的戳。

A: 子窗口向window.navigator添加一个监听函数，并打上子窗口的戳。

C: 父窗口执行post的时候，调用原先子窗口添加在navigator里的监听函数，并将要传输的数据作为函数参数传入。

D: 子窗口执行post的时候，调用原先父窗口添加在navigator里的监听函数，并将要传输的数据作为函数参数传入。

注意：子窗口和父窗口要找到对方的监听函数必须得事先知道对方在添加监听函数的时候打上的戳

D. 什么是跨域请求

1.浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域
2.只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

协议http和https不同，端口80还是81，域名更好理解

跨域限制主要是为了安全考虑

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种DOM同源策略：
1.禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2.XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

https://blog.csdn.net/tjcjava/article/details/76468225

基本原理就是通过动态创建script标签,然后利用src属性进行跨域。

这么说比较模糊，我们来看个例子:// 定义一个fun函数

返回的js脚本，直接会执行。所以就执行了事先定义好的fun函数了，并且把数据传入了进来。

当然，这个只是一个原理演示，实际情况下，我们需要动态创建这个fun函数，并且在数据返回的时候销毁它。因为在实际使用的时候，我们用的各种ajax库，基本都包含了jsonp的封装，不过我们还是要知道一下原理，不然就不知道为什么jsonp不能发post请求了

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域这种方式非常适用于iframe跨域的情况，直接看例子吧比如a页面地址为 http://a.yourhost.com b页面为 http://b.yourhost.com 。这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。之后，就可以通过 parent 或者 window[‘iframename’]等方式去拿到iframe的window对象了。

window.name跨域同样是受到同源策略限制，父框架和子框架的src必须指向统一域名。window.name的优势在于，name的值在不同的页面(或者不同的域名)，加载后仍然存在，除非你显示的更改。并且支持的长度达到2M.

E. js 跨域操作 iframe 里面的元素

不可以。
iframe也存在跨域的问题。你只能修改iframe的熟悉，但是操作不了iframe里面的元素。这是浏览器限制，非JS能力所及。

F. 如何用js操控iframe引用的跨域网站

<body>
	<buttonid="btn">submit</button>
	<iframesrc="http://www..com"id="frame"frameborder="0"></iframe>
</body>
<script>
	varbtn=document.getElementById('btn');
	varfr=document.getElementById('frame');
	btn.addEventListener("click",function(){
	fr.contentWindow.location.href="http://www.2345.com";
	});
</script>

给按钮绑定个事件吧然后执行iframe.location.href="新闻页地址";

G. JavaScript 怎么跨域获取 iframe 中的内容

如果 iframe地址与当前页面地址同域，js可以访问该页面内的对象.

使用 window.frames[0] 或者window.frames[name] 来访问frame的window对象

如要获取元素，使用 window.frames[0].document.getElementById
另外，ie系列和webkit系列可能访问方法上略有区别，具体可调试查看

H. 跨域怎么解决

问题一：如何解决跨域问题特别注意两点：
第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。
2. 前端解决跨域问题
1> document.domain + iframe (只有在主域相同的时候才能使用该方法)
1) 在a/a中：
复制代码
document.domain = 'a';
var ifr = document.createElement('iframe');
ifr.src = 'script.a/b';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
在这里操作doc，也就是b
ifr.onload = null;
};
复制代码
2) 在script.a/b中：
document.domain = 'a';
2> 动态创建script
这个没什么好说的，因为script标签不受同源策略的限制。
复制代码
function loadScript(url, func) {
var head = document.head || document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.src = url;
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState=='loaded' || this.readyState=='plete'){
func();
script.onload = script.onreadystatechange = null;
}
};
head.insertBefore(script......>>

问题二：如何解决跨域问题由于此前很少写前端的代码(哈哈，不合格的程序员啊)，最近项目中用到json作为系统间交互的手段，自然就伴随着众多ajax请求，随之而来的就是要解决 ajax的跨域问题。本篇将讲述一个小白从遇到跨域不知道是跨域问题，到知道是跨域问题不知道如何解决，再到解决跨域问题，最后找到两种方法解决ajax 跨域问题的全过程。
不知是跨域问题
起因是这样的，为了复用，减少重复开发，单独开发了一个用户权限管理系统，共其他系统获取认证与授权信息，暂且称之为A系统；调用A系统以B为例。在B系统中用ajax调用A系统系统的接口(数据格式为json)，当时特别困惑，在A系统中访问相应的url可正常回返json数据，但是在B系统中使用 ajax请求同样的url则一点儿反应都没有，好像什么都没有发生一样。这样反反复复改来改去好久都没能解决，于是求救同事，提醒可能是ajax跨域问题，于是就将这个问题当做跨域问题来解决了。
知跨域而不知如何解决
知道问题的确切原因，剩下的就是找到解决问题的方法了。google了好久，再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。
找到一种解决方式
现在也知道了怎样来解决跨域问题，余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别，也犯了错误，google了好久才解决。
首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版：
复制代码
$(document).ready(function(){
var url='localhost:8080/...upById
+?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false,
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
});
复制代码
这样写是完全没有问题的，起先error的处理函数中仅仅是alert(“error”)，为了进一步弄清楚是什么原因造成了错误，故将处理函数变为上面的实现方式。最后一行alert使用为；parsererror。百思不得其解，继续google，最终还是在万能的stackoverflow找到了答案，链接在这里。原因是jsonp的格式与json格式有着细微的差别，所以在server端的代码上稍稍有所不同。
比较一下json与jsonp格式的区别：
json格式：
{
message&q......>>

问题三：跨域是指什么,因为什么引起的?有哪些解决方案?web前端知识跨域是指不同域名之间相互访问例如我的电脑上有2个服务器 192.168.0.11 192.168.0.12 如果第一个服务器上的页面要访问第二个服务器就叫做跨域或者要访问xxx 也是不同域名也是跨域
HTML5 里有个window.postMessage 方法，支持跨域访问，详情可以参考
webhek/window-postmessage-api
如果你的程序在服务器上，也可以进行相应的操作来完成跨域访问
纯手打有问题欢迎咨询

问题四：如何解决跨域问题打开IE浏览器，在工具菜单下选择Internet选项，打开Internet选项卡
切换到安全选项卡下，点击可信站点，然后单击站点按钮
可信站点窗口输入网址到可信站点的区域，点击添加按钮，网址则会添加到网站列表下，最后关闭可信站点窗口
还是在安全选项卡下的可信站点，点击自定义级别
打开受信任的站点区域窗口，找到跨域浏览窗口和框架选择启用
在当前窗口中继续往下翻，通过域访问数据源也选择启用，点击确定关闭受信任的站点区域窗口
在Internet窗口也点击确定按钮，同时关闭浏览器
在请求的js脚本中添加是否允许跨域访问的权限，jQuery.support.cors默认值为true，则代表允许；反之，不允许。设置完成，重新打开浏览器验证即可

问题五：$跨域请求怎么解决 post请求进行跨域
angularjs内置封装了类ajax的网络服务$,所以实现了依赖外部插件来完成完整的前后端分离方案
$scope.main = {
getData: function () {
$({
method: 'POST',
url: 'localhost:8000',
headers: {
'Content-Type' : 'application/x--form-urlencoded'
},
data: {
myUrl: 'c.m.163/...0'
}
}).then(function success(result) {
数据请求成功
console.log(result.data);
},function error(err) {
数据请求失败
console.log(err);
});
}
};
注意：表面上是向$中传入了一个回调函数提供相应时调用，实际是返回了一个promise对象，angular1.2以上的版本对$进行了优化
优化后：
$scope.main = {
getData: function () {
var myUrl = 'c.m.163/...0';
var url = 'localhost:8000';
var promise = $({
method: 'POST',
url: url,
headers: {
'Content-Type' : 'text/plain'
......>>

问题六：如何解决跨域问题关于跨域名问题还是问题么，这方面的解决实践非常多，今天我就旧话重提把我所知道的通过几个应用场景来分别总结一下（转帖请注明出处：blog.csdn/lenel）
先说明一点：我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript
场景一：将bbs.xxx的页面用iframe嵌入到xxx的中，如何在iframe内外使用js通信（转帖请注明出处：blog.csdn/lenel）
一级域名都是xxx 这个域名一定是在您的控制下，所以你只要在两个页面中同时升级域名即可
在父窗口和iframe内部分别加上js语句：document.domain=xxx;
之后2个页面就等于在同一域名下，通过window.parent oIframe.contentDocument就可以相互访问，进行无障碍的JS通信
在新浪、淘宝等很多页面都能找到这样的语句。不过document.domain不可以随便指定，只能向上升级，从bbs.xxx升级到yyy肯定会出错
场景二：将yyy的页面用iframe嵌入到xxx的中，两个域名都在您的控制下，如何在iframe内外进行一定的数据交流（转帖请注明出处：blog.csdn/lenel）
你可以通过相互改变hash值的方式来进行一些数据的通信
这里的实现基于如下技术要点：
1、父窗口通过改变子窗口的src中的hash值把一部分信息传入，如果src只有hash部分改变，那么子窗口是不会重新载入的。
2、
子窗口可以重写父窗口的location.href，但是注意这里子窗口无法读取而只能重写location.href所以要求前提是您控制两个域名，知
道当前父窗口的location.href是什么并写在子窗口内，这样通过parent.location.href =
已知的父窗口的href+#+hash。这样父窗口只有hash改变也不会重载。
3、上面两步分别做到了两个窗口之间的无刷新数据通知，
那么下面的来说如何感知数据变化。标准中没有相关规定，所以当前的任意浏览器遇到location.hash变化都不会触发任何javaScript事
......>>

问题七：如何解决javascript的跨域问题一般是用iframe设置
document.domain = 'a';var ifr = document.createElement('iframe');ifr.src = 'a/index';ifr.style.display = 'none';document.body.appendChild(ifr);ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; console.log(doc.documentElement.innetHTML);};然后HTML5新特性有 ,postMessage
function Init () { if (window.addEventListener) { all browsers except IE before version 9 window.addEventListener (message, OnMessage, false); } else { if (window.attachEvent) { IE before version 9 window.attachEvent(onmessage, OnMessage); } } } function GetState () { var frame = document.getElementById (myFrame); var message = getstate;参数if (frame.contentWindow.postMessage) { 传递的参数，后面是传递的你的跨域域名frame.contentWindow.postMessage (message, *); } } function OnMessage (event) { console.log(event.data);} document.body.onload=function(){Init();GetState();};

问题八：如何解决跨域问题 VPN或者域名

问题九：如何解决请求跨域的问题 jsonp 是写 script 标签，只能满足 get 请求。跨域 post 的话，IE8 及以上和其他主流浏览器可以用 window.postMessage 来实现，也就是传说中的 HTML5 方法了，可以看下标准，代码很简单。IE6、7 就用老式的方法

问题十：怎么解决服务器间的跨域问题服务端的解决方案的基本原理就是，由客户端将请求发给本域服务器，再由本域服务器的代理来请求数据并将响应返回给客户端。
最常用的服务器解决方案就是利用web服务器本身提供的proxy功能，如apache和ligd的mod_proxy模块。在网络内部，tran *** it的分流功能也可以解决部分跨域问题。但这些方法都有一定的局限性，鉴于安全性等问题的考虑，space这边最后开发了一个专门用于处
理跨域请求代理服务的spproxy模块，用于彻底解决js跨域问题。
下面我们将以空间的开放平台为例，简单介绍下如何通过apache的mod_proxy、tran *** it的分流以及space的spproxy模块来解
决该跨域问题，并简单介绍下spproxy的一些特性、缺点及下一步的改进计划。
空间在展现每个UWA开放模块之前都必须请求该模块的xml源代码以进行解析，每个模块的源代码文件都是存放在act域下的/ow/uwa目录下，那么在

用户空间首页（hi域）中请求该xml文件时就会存在js跨域问题。要解决该问题，只能让js向hi域的web服务器请求xml文件，而hi域web服务
器则通过一定的代理机制（如mod_proxy、tran *** it分流、spproxy）向act域的web服务器请求文件

I. js如何操作iframe的跨域问题

A域名下的页面index.htm中内嵌了一个iframe页面，iframe内引用的是B域名的sub-index.htm页面，但是为了避免出
现在index.htm页面中出现滚动条，需要明确知道sub-index.htm页面的高度和宽度，可是sub-index.htm的页面内容是不可控的，可能会根据不同用户页面大小会不一样；问题就是如何把sub-index.htm页面的高度和宽度传递给index.htm页面？

具体解决：
1、在index.htm页面中声明一个js函数process(height, width);用来实现设置页面内iframe的高度和宽度；
2、
在sub-index.htm页面中再内嵌一个隐藏的iframe，iframe的src指向A域名下的页面ex.htm?height=xx&
width=yy，该页面没有任何内容，只是用来传递sub-index.htm页面加载完之后的宽度和高度这两个数据的，页面内js拿到request
中的参数之后直接调用parent.parent.process(height, width);完成对父页面宽度和高度的设置；
如图：

J. 如何用javascript 跨域获取iframe子页面的元素信息

跨域的话想用父页面的js获取iframe里的元素是不可能的。
用chrome扩展程序的话是可以的。

导航:首页 > 编程语言 > jsiframe跨域请求

jsiframe跨域请求

与jsiframe跨域请求相关的资料

友情链接