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

来源：互联网发布：网络数据抓包工具编辑：程序博客网时间：2024/06/01 10:04

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

一、在使用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自适应高度

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日发布

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)

阅读全文

0 0