如何实现跨域获取iframe子页面动态的url
有的时候iframe的子页面会动态的切换页面，我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息。获取跨域的子页面信息会报错。
这时可以通过html5 提供的接口 postMessage来过去跨域子页面信息。如下代码：
在localhost:8000服务器下的入口测试页面：http://localhost:8000/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="title"></h1>
<h1 id="title_1"></h1>
</body>
<script>
window.addEventListener('message',function(rs){
console.log(rs.data);
document.querySelector("#title").innerHTML = rs.data;
});
var iframe = document.createElement("iframe");
document.querySelector("body").appendChild(iframe);
iframe.setAttribute("src","http://localhost:3000/iframe.html");
//iframe.style.display = "none"; //利用contentWindow.window获取子页面地址
/*setTimeout(function () {
document.querySelector("#title_1").innerHTML = iframe.contentWindow.window.location;
},1000)*/
</script>
</html>
在localhost:3000服务器下的iframe页面：http://localhost:3000/iframe.html
这里页面会自动跳转到iframe_change.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>这是iframe里面的内容</h2>
</body>
<script>
window.location.href = "./iframe_change.html";
</script>
</html>
在localhost:3000服务器下的iframe_change页面：http://localhost:3000/iframe_change.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>iframe already changed</h2>
</body>
<script>
window.parent.postMessage(window.location.href,"*");
</script>
</html>
这里调用postMessage发送子页面信息。在index页面通过以下代码来获取子页面信息。
window.addEventListener('message',function(rs){
console.log(rs.data);
document.querySelector("#title").innerHTML = rs.data;
});
上面的跨域获取iframe动态url的方法可以实现一个微信web开发中一个很重要的问题：
主页面利用https://open.weixin.qq.com/connect/oauth2/authorize获取微信用户信息，主页面的域名是有限制的，需要在公众平台上配置而且一般配置成线上的域名。
但是在实际本地开发的时候，我们主页面的ip一般是localhost或者192.168.1.198:8080,这在微信浏览器上获取用户信息的时候会被拒绝，给开发调试造成极大的不便。
利用上面的iframe的方法就可以绕过域名限制的问题：将获取openId的功能交给单独的一个页面
getOpenId.html负责跳转到微信auth页面授权获取code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>授权</title>
<script>
function getUrlParam(name){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2].replace(/%20/g,"+")); return null;
} var companyAppId = "wx124345678"; //公司自己的appid
var wxCode = getUrlParam('code');
//如果url上没有code，则跳转授权
if(!wxCode){
var url = window.location.href;
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
'appid='+companyAppId+'&redirect_uri='+encodeURIComponent(url)+
'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
}else {
//如果url上有code，则说明已经授权完毕可以返回code给主页面
window.parent.postMessage(wxCode,"*");
}
</script>
</head>
<body> </body>
</html>
getOpenId.js 在不影响文档流的情况下页面插入iframe进行微信授权，一旦获取到code，则移除iframe。
var wxTool = {
getOpenId:function (src,callback) {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
document.querySelector("body").appendChild(iframe);
iframe.setAttribute("src",src);
window.addEventListener('message',function(rs){
console.log(rs.data);
callback(rs.data);
iframe.remove();
});
}
};
index.html
wxTool.getOpenId("http://live.domain.com/getOpenId.html",function (code) {
//TODO 利用code请求服务器 获取微信用户信息
})
总结：这种方法也许不是最快的，直接在入口页面的<head>下面写上<script>直接跳转进行微信授权然后重定向回来也许是最快的，但是一旦在跳转授权时由于网络原因可能导致页面会出现短暂的空白，这种情况用户是不愿看到的。而利用iframe的好处是它是异步的，不影响主业务的加载和运行。
所以如果你是希望在初始页面很快的呈现微信用户的信息则用上面第一种方法，否则，使用iframe可能更好些。
如何实现跨域获取iframe子页面动态的url的更多相关文章
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- Js获取iframe子页面全局变量
项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...
- iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素
一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
- 获取iframe子页面节点，响应浏览器宽高
获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...
- 获取iframe子页面内容高度给iframe动态设置高度
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
- Js动态获取iframe子页面的高度总结
问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...
- Selenium_webdriver获取iframe子页面元素
有时候我们在定位一个页面元素的时候发现一直定位不了,反复检查自己写的定位器没有任何问题,代码也没有任何问题.这时你就要看一下这个页面元素是否在一个iframe中,这可能就是找不到的原因之一.如果你在一 ...
- iframe子页面获取父页面元素的方法
在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...
随机推荐
- saltstack中如何实现多个master来管理minion
背景: 公司有多个部门,有一些机器有本部门的业务,这些机器也有其他部门的业务,所以本部门需要一个master服务器来管理这批机器,其他部门也需要一个master服务器来管理这个机器,所以就需要多个ma ...
- c++ 引用方式传递数组
值传递 (pass by value),指针传递(pass by pointer),当发生函数调用时,需要给形参分配存储单元.当传递是对象时,要调用拷贝构造函数.而且指针最后析构时,要处理内存释放问题 ...
- Android studio下将项目代码上传至github包括更新，同步，创建依赖
AS中设置GIT 一.开篇 本文讲如何使用Android Studio将项目上传到github,虽然讲上传github的文章很多,但是大部分都是使用Git Bash命令行,虽然效率高些,但是有点麻烦, ...
- concat layer
参考:http://blog.csdn.net/bailufeiyan/article/details/50876728#reply
- python3 + selenium 之元素定位
8种定位方式 定位一个元素 webdriver提供了一系列的对象定位方法,常用的有以下几种 driver.find_element_by_name()--最常用,简单 driver.find_elem ...
- python 全栈开发，Day72(昨日作业讲解,昨日内容回顾,Django多表创建)
昨日作业讲解 1.图书管理系统 实现功能:book单表的增删改查 1.1 新建一个项目bms,创建应用book.过程略... 1.2 手动创建static目录,并在目录里面创建css文件夹,修改set ...
- JavaScript实现抽象类与虚方法（六）
一:什么是js抽象类与虚方法 虚函数是类成员中的概念,是只做了一个声明而未实现的方法,具有虚函数的类就称之为抽象类,这些虚函数在派生类中才被实现.抽象类是不能实例化的,因为其中的虚函数并不是一个完整的 ...
- LINQ学习之旅 C#3.0新特性（一）
一:C#3.0新语言的特性 自动属性(Auto-Implemented Properties) 隐含类型局部变量(Local Variable Type Inference) 匿名类型(Anonymo ...
- webstrom的热更新没效果
webstorm保存的时候会先保存到临时文件中,其实并没有真正保存,要在setting->stystem settings下的“use save write”去掉
- Java jvm 内存参数限制
nohup java -jar -Xms3g -Xmx3g jenkins.war > jenkins.log 2>&1 &