iframe跨域取数据

最新推荐文章于 2024-07-30 03:25:10 发布

xwcueh

最新推荐文章于 2024-07-30 03:25:10 发布

阅读量1.6k

点赞数

文章标签： iframe js dom ViewUI

本文链接：https://blog.csdn.net/xwcueh/article/details/84088704

版权

大家好：
这是我的第一篇博客文章，围观有奖，围观有奖！
好了，废话少说，进入主题，前段时间遇到了一个问题：
我在页面里嵌套了一个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;
}