您的位置：首页 > Web前端 > HTML

the travel of solving iframe navigate to display page of certain part of parent html page

2017-11-03 12:01 531 查看

the problem i stuck in is that ,i cannot open a parent page inner the iframe html ,and i got these material which maybe useful :

this maybe used in change the weight of character in iframe,contentwindow, http://www.runoob.com/jsref/prop-frame-contentwindow.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeStyle(){
var x=document.getElementById("myframe");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
y.body.style.backgroundColor="#0000ff";
}
</script>
</head>
<body>

<iframe id="myframe" src="demo_iframe.htm">
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="changeStyle()" value="修改色">

</body>
</html>

http://blog.csdn.net/skydar/article/details/51207110

iframe.contentWindow 介绍

原创 2016年04月21日
11:07:30

4461

一、在使用iframe的页面，要操作这个iframe里面的DOM元素可以用：

contentWindow、contentDocument(测试的时候chrom浏览器，要在服务器环境下)

1.先获取iframe里面的window对象，再通过这个对象，获取到里面的DOM元素

例子：

var ifr = document.getElementById("iframe");

ifr.contentWindow.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

ifr.contentWindow 这里，返回的是iframe的window对象，所以后面可以接着调用document方法，再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

二、在iframe本页面，要操作这个iframe的父页面的DOM元素（即嵌套这个iframe的页面）可以用：

window.parent、window.top(这里的TOP是获取的顶层，即有多层嵌套iframe的时候使用)

var ifr = document.getElementByTagName("iframe");

ifr.parent.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

三、onload事件

非IE下用法

ifr.onload = function(){
//SOMETHING
}

IE下，需要绑定

ifr.attachEvent("onload",function(){

//something

})

http://www.honglei.net/?p=287

跨域iframe自适应高度

Leave
a reply

这个可能是一个老生常谈的问题了，搜索google和百度应该也是文章大把大把的；处理方式也大同小异，今天又有哥们问这个问题，所以还是将自己的处理方式写出来。

最早遇到这个问题是07年在Yahoo的时候，当时SNS盛行，Yahoo也决定做SNS，其中就有应用是iframe模式的，但是iframe的页面在对方服务器上，使用的也是别人的域名，Yahoo也不可能给对方提供二级或三级域名；那就遇到一个问题，怎样去调整iframe的高度，让他做到自适应；大家都知道JS为了安全，是不能跨域执行的，所以只能通过其他方式实现；感谢克军同学当时给的建议。

下面具体说说怎么实现吧。

首先因为iframe是跨域的，所以不能直接用JS来控制，只能通过一个中间键，我们这里选择在iframe的页面（页面B）中再iframe一个父页面（页面A）同域的页面（页面C）；这样页面C就能和页面A进行无障碍的通讯了；因为页面B iframe 页面C，所以页面B可以改写页面C的href值；到这里大家应该看明白啥意思了，来张图说明下：

A页面中的内容

A页面主要就是接收C页面传过来的内容并且去完成相应的操作。可能有人会说直接C页面来操作不就可以了？但是那样处理不太好，因为可能A页面中还有很多其他的公共方法，比如美化过的Alert等，所以如果能做一个公共的方法来接收C页面传过来的值会更加方便之后的框架调整，而且也不建议总是去修改页面C。

<iframe id="ifr" src="iframe_b.html" height="200" width="400"></iframe>
<script type="text/javascript">
var ifr_el = document.getElementById("ifr");
function getIfrData(data){
ifr_el.style.height = data+"px";
}
</script>

B页面中的内容

B页面的主要内容当然是怎么把值传递给C页面，前面说了是将值传递到C页面的href中，所以只要修改iframe的src就可以，因为不用刷新C页面，所以可以用过hash的方式传递给C页面

<div id="box">
<button id="btn_auto" type="button">Height Auto: off</button>
<button id="btn_plus10" type="button">Height +10px</button>
<button id="btn_minus10" type="button">Height -10px</button>
</div>
<iframe id="ifr" src="iframe_c.html" width="0" height="0"></iframe>
<script type="text/javascript">
var box_el = document.getElementById("box"),
btn_auto_el = document.getElementById("btn_auto"),
btn_plus10_el = document.getElementById("btn_plus10"),
btn_minus10_el = document.getElementById("btn_minus10"),
ifr_el = document.getElementById("ifr");

var isAuto = false,
oldHeight = 0,
ifrSrc = ifr_el.src.split("#")[0];

btn_auto_el.onclick = function(){
if(!isAuto){
isAuto = true;
btn_auto_el.innerHTML = "Height Auto: on";
}else{
isAuto = false;
btn_auto_el.innerHTML = "Height Auto: off";
}
}
btn_plus10_el.onclick = function(){
var height = box_el.offsetHeight;
box_el.style.height = (10+height)+"px";
}
btn_minus10_el.onclick = function(){
var height = box_el.offsetHeight;
box_el.style.height = (height-10)+"px";
}
setInterval(function(){
if(isAuto){
var height = document.body.scrollHeight;
height += 20;
if(oldHeight != height){
oldHeight = height;
ifr_el.src = ifrSrc+"#"+oldHeight;
}
}
}, 200);
</script>

C页面中的内容

C页面的唯一功能就是接收B页面通过href传进来的值并且传递给A页面，可到B页面传来的值可以通过一个定时器不停去查看location.href是否被改变，但是这样感觉效率很低，还有个方式就是在新的浏览器中通过onhashchange事件（IE8+,Chrome5.0+,Firefox3.6+,Safari5.0+,Opera10.6+）来监听href的改变。

<script type="text/javascript">
var oldHeight = 0;

setInterval(function(){
var height = location.href.split("#")[1];
if(height && oldHeight != height){
oldHeight = height;
if(window.parent.parent.getIfrData){
window.parent.parent.getIfrData(oldHeight);
}
}
}, 200);
</script>

高度应用只是iframe跨域传值中最简单也是最常见应用，其实能扩展出很多其他的需求，之前在Yahoo的项目中就将iframe中的弹出框操作也传递到了外面，以保证样式的统一和页面的全遮盖。

最后举个“栗子”，演示请看http://www.honglei.net/demo/iframe_a.html

window.name

window.name 属性可设置或返回存放窗口的名称的一个字符串。利用这个属性做iframe跨域传值传值是很方便的。

具体操作参看这里。

其原理与midway的相似，midway利用一个与父页面同域的代理页面，通过改变其location.hash实现跨域传值，而这里这是通过改变window.name实现跨域传值，本质上都是通过代理iframe作为中介来实现的。

location.hash能传递的数据非常有限。

参考：

http://www.mamicode.com/info-detail-1246481.html

　　新手学跨域之iframe

　　JavaScript跨域总结与解决办法

　　iframe跨域通信的通用解决方案

　　URL的井号

　　https://developer.mozilla.org/zh-CN/docs/Web/API/Window/name

　　https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash

iframe的跨域高度自适应（通过跨域页面中嵌套本域页面）

https://segmentfault.com/a/1190000000702539

新手学跨域之iframe

跨域

亦秋 2014年09月30日发布

赞 | 6

收藏 | 45

18.7k 次浏览

jsonp
iframe

● document.domain

● window.name

● location.hash

● window.navigator (IE6 bug)

● postMessage
CORS

● XMLHttpRequest (modern browser)

● XDomainRequest (IE8+)
图像Ping (略)
flash (略)
页面嵌套iframe是比较常见的，比如QQ相关业务页面的登录框一般都是iframe的。使用ifrmae跨域要满足一个基本条件，父页面和子页面都是自己可以控制的，如果随便把iframe指向一个其他网站，想通过跨域手段操作它基本上是不可能的。

document.domain

document.domain

是比较常用的跨域方法。实现最简单但只能用于同一个主域下不同子域之间的跨域请求，比如 foo.com 和 img.foo.com 之间，img1.foo.com 和 img2.foo.com 之间。只要把两个页面的

document.domain

都指向主域就可以了，比如

document.domain='foo.com';

。

设置好后父页面和子页面就可以像同一个域下两个页面之间访问了。父页面通过

ifr.contentWindow

就可以访问子页面的window，子页面通过

parent.window

或

parent

访问父页面的window，接下来可以进一步获取dom和js。

<!-- foo.com/a.html -->
<iframe id="ifr" src="http://img.foo.com/b.html"></iframe>
<script>
document.domain = 'foo.com';
function aa(str) {
console.log(str);
}
window.onload = function () {
document.querySelector('#ifr').contentWindow.bb('aaa');
}
</script>

<!-- img.foo.com/b.html -->

<script>
document.domain = 'foo.com';
function bb(str) {
console.log(str);
}

parent.aa('bbb');
</script>

window.name

只要不关闭浏览器，

window.name

可以在不同页面加载后依然保持。尝试在浏览器打开百度

baidu.com

，然后在控制台输入

window.name='aaa';

回车，接着在地址栏输入

qq.com

转到腾讯首页，打开控制台输入

window.name

查看它的值，可以看到输出了

"aaa"

。

例如子页面bar.com/b.html向父页面foo.com/a.html传数据。

<!-- foo.com/a.html -->
<iframe id="ifr" src="http://bar.com/b.html"></iframe>
<script>
function callback(data) {
console.log(data)
}
</script>

<!-- bar.com/b.html -->
<input id="txt" type="text">
<input type="button" value="发送" onclick="send();">

<script>
var proxyA = 'http://foo.com/aa.html';    // foo.com下代理页面
var proxyB = 'http://bar.com/bb.html';    // bar.com下代理空页面

var ifr = document.createElement('iframe');
ifr.style.display = 'none';
document.body.appendChild(ifr);

function send() {
ifr.src = proxyB;
}

ifr.onload = function() {
ifr.contentWindow.name = document.querySelector('#txt').value;
ifr.src = proxyA;
}
</script>

<!-- foo.com/aa.html -->
top.callback(window.name)

location.hash

较常用，把传递的数据依附在url上

例如获取子页面bar.com/b.html的高度及其他数据

<!-- foo.com/a.html -->
<iframe id="ifr" src="http://bar.com/b.html"></iframe>
<script>
function callback(data) {
console.log(data)
}
</script>

<!-- bar.com/b.html -->
window.onload = function() {
var ifr = document.createElement('iframe');
ifr.style.display = 'none';
var height = document.documentElement.scrollHeight;
var data = '{"h":'+ height+', "json": {"a":1,"b":2}}';
ifr.src = 'http://foo.com/aa.html#' + data;
document.body.appendChild(ifr);
}

<!-- foo.com/aa.html -->
var data = JSON.parse(location.hash.substr(1));
top.document.getElementById('ifr').style.height = data.h + 'px';
top.callback(data);

window.navigator

IE6的bug，父页面和子页面都可以访问

window.navigator

这个对象，在

navigator

上添加属性或方法可以共享。因为现在没有IE6环境，这里就不写例子了。

postMessage

HTML5新增方法，现在浏览器及IE8+支持，简单易用高大上。

.postMessage(message, targetOrigin)

参数说明

message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)

targetOrigin: 是限定消息接收范围，不限制请使用 '*'

'message', function(e)

回调函数第一个参数接收
Event 对象，有三个常用属性：

data: 消息

origin: 消息来源地址

source: 源 DOMWindow 对象

一个简单的父页面

foo.com/a.html

和子页面

bar.com/b.html

建立通信

<!-- foo.com/a.html -->
<iframe id="ifr" src="http://bar.com/b.html"></iframe>
<script>
window.onload = function () {
var ifr = document.querySelector('#ifr');
ifr.contentWindow.postMessage({a: 1}, '*');
}
window.addEventListener('message', function(e) {
console.log('bar say: '+e.data);
}, false);
</script>

<!-- bar.com/b.html -->
window.addEventListener('message', function(e){
console.log('foo say: ' + e.data.a);
e.source.postMessage('get', '*');
}, false)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航