iframe跨域取数据

大家好:
这是我的第一篇博客文章,围观有奖,围观有奖!
好了,废话少说,进入主题,前段时间遇到了一个问题:
我在页面里嵌套了一个iframe,iframe连接的是一个异域的地址,花了不少的时间没有发现是什么原因,原以为是js获取iframe页面的dom元素出的问题,居然忽略了是跨域的问题。

有关iframe获取元素也是很容易出问题,我就借此机会将所有有关父页面获取iframe元素,以及iframe获取父页面的方法详细罗列一下,并介绍一个比较不错的跨域取元素的方法:

1.从父页面取iframe窗口:(存在跨域访问限制)
11.window.frames[0];
22.document.getElementById('ifr').contentWindow;
以上两种方法对所有的浏览器有效。

2.获取iframe的document:(存在跨域访问限制)
21.document.getElementById('ifr').contentDocument;
22.document.getElementById('ifr').contentWindow.document;
33.window.frames[0].document;
网上有些资料写的是contentWindow只对ie有效,contentDocument只对非ie浏览器有效,但是经过我的测试,这两种方法是对当前主流浏览器有效的(ie,firefox,chrome,safari,opera)

3.iframe获取父窗口:(存在跨域访问限制)
31.window.parent;(获取一级父窗口)
32.window.top;(获取顶级窗口)

下面我讲两种跨域访问的例子:


js跨域访问:

js跨域访问dom元素是被禁止的,比如:a.com访问b.com以及a.com访问b.a.com的dom元素都是访问不到的,但是js文件是允许访问的,利用这个特点实现跨域。
下面贴上代码:

a.com域的test.html代码:
<input type="button" value="跨域测试" onclick="loadScript('http://localhost:8080/Aset2/pages/ipad2/cosplay/test2.js')"/>
<input type="button" value="test2" onclick="test2()"/>
<div id="ttt">cosplay</div>


   	
function loadScript(url){
var lastScript;
var script = document.createElement("script");
var id = new Date().getTime();
script.src = url;
script.type = "text/javascript";
script.id = id;
if(!script && g(lastScript))g(lastScript).parentNode.removeChild(g(lastScript));

lastScript = id;

document.head.appendChild(script);
}
function g(x){
return document.getElementById(x);
}

b.com的test2.js代码:
function test2(){
var tt = document.getElementById("ttt").innerHTML;
alert(tt);
}

通过127.0.0.1访问a.com的test.html就与b.com(localhost)不在一个域中了,点击跨域测试获取js代码,点击test2可访问从b.com获取的js,正常情况下应该输出cosplay,这种方法跨域比较简单,在js里准备好数据传递给异域的页面,比较起jsonP和代理跨域更简单


sonP跨域访问数据:

域一:使用127.0.0.1访问test.html的代码:

$.ajax({
url:"http://localhost:8080/*****/MH.action",
type:"post",
dataType:"jsonp",
jsonp:"callback",
cache:"false",
async:"false",
data:{自己传递数据},
success:function(data){
alert(data.name);
}
})

上面的$.ajax访问的url是localhost与127.0.0.1是不同的域
其中MH.action的代码:

public String execute() {
JSONObject res = new JSONObject();
res.put("name", "郭德纲");
PrintWriter pw;
try {
pw = Struts2Utils.getResponse().getWriter();
String callback = Struts2Utils.getRequest().getParameter("callback");
Struts2Utils.getResponse().setContentType("text/html");
Struts2Utils.getResponse().setCharacterEncoding("utf-8");
pw.print(callback + "("+res.toString()+")");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}

Struts2Utils是自己的类,request,response自己获取即可
运行test.html会输出“郭德纲”。异域获取数据成功!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值