iframe跨域问题

简介: 一般分两种情况: 一、 是同主域下面,不同子域之间的跨域;   同主域,不同子域跨域,设置相同的document.domian就可以解决;      父页访问子页,可以document.getElementById("myframe").

一般分两种情况:

一、 是同主域下面,不同子域之间的跨域;

  同主域,不同子域跨域,设置相同的document.domian就可以解决;

     父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容;如果支持contentDocument也可以直接document.getElementById("myframe").contentDocument访问子页面内容;

  子页访问父页,可以parent.js全局属性

二、 是不同主域跨域;

  前提,www.a.com下a.html,a.html内iframe调用了www.b.com下的b.html,b.html下iframe调用了www.a.com下的c.html

  b.html是不无法直接访问a.html的对象,因为涉及到跨域,但可以访问parent,同样c.html的parent可以访问b.html。c.html和a.html同域,是可以访问a下的对象的。parent.parent.js对象!

 

来源:http://www.cnblogs.com/pigtail/archive/2013/01/24/2875310.html

 

 

很多人一直都有个想法,要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include,require实现统一多页面布局的能力。

通过Javascript的帮忙我们可以像后台一样动态加载操作iframe对象属性src指向的html页面的内容。这样的操作需要提供两个页面,一个页面是iframe所在页面(页面名称:iPage.html),另一个页面是iframe属性src指向页面(页面名称:srcPage.html)。

iPage.html,<body>里dom:

  1. <iframe id=iId name=iName src=srcPage.html scrolling=no frameborder=0></iframe>

srcPage.html,<body>里dom:

  1. <h1>妹妹的一天</h1> 
  2. <p>早上吃早点,中午约会吃饭,下午K歌,晚上和哥哥瞎折腾</p>

下面讨论ie下JS是怎么操作以上两个页面,再讨论firefox的做法,最后给出兼容ie,firefox浏览器操作iframe对象的方法。

一、ie下访问操作iframe里内容

大家都知道iframe是非标准html标签,它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话,嘿嘿)

1. ie通过document.frames["IframeName"]获取它,例子:我们在iPage.html里输出srcPage.html里h1的内容,JS如下:

  1. alert(document.frames["iName"].document.getElementsByTagName(h1)[0].firstChild.data);

你会发现这样在页面里加入代码,好像并没有输出想要的东东,为什么呢?这个我也没有搞清楚,只是习惯性的加入了window.onload就有输出了(注:JS代码都写到这个事件里去),知道的人士可否告诉我下。why?更改之后代码ie下有了输出,firefox下document.frames没有定义错误提示:

  1. window.onload = (function () { 
  2.   alert(document.frames["iName"].document.getElementsByTagName(h1)[0].firstChild.data);
  3. });

2. ie另一种方法contentWindow获取它,代码:

  1. window.onload = (function () { 
  2.  var iObj = document.getElementById(iId).contentWindow;
  3.  alert(iObj.document.getElementsByTagName(h1)[0].firstChild.data);
  4. });

此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过,好事啊!嘿嘿。(网上一查,发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞,有脚本注入攻击的危险。

后来听说可以在后台防止这样的事情发生,算是松了口气。不过还是希望firefox新版本可以解决这样的危险。)

3.改变srcPage.html里h1标题内容,代码:

  1. iObj.document.getElementsByTagName(h1)[0].innerHTML=我想变成她一天的一部分;

通过contentWindow后访问里面的节点就和以前一样了。

二、firefox下访问操作iframe里内容

Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准,通过标准可以少写一个document,代码:

  1. var iObj = document.getElementById(iId).contentDocument;
  2. alert(iObj.getElementsByTagName(h1)[0].innerHTML=我想变成她一天的一部分);
  3. alert(iObj.getElementsByTagName(p)[0].firstChild.data);

兼容这两种浏览器的方法,现在也出来了,就是使用contentWindow这个方法。

嘿嘿!操作iframe是不是可以随心所欲了呢?如果还觉得不爽,你甚至可以重写iframe里的内容。

三、重写iframe里的内容

通过designMode(设置文档为可编辑设计模式)和contentEditable(设置内容为可编辑),你可以重写iframe里的内容。代码:

  1. var iObj = document.getElementById(iId).contentWindow;
  2. iObj.document.designMode = On;
  3. iObj.document.contentEditable = true;
  4. iObj.document.open();
  5. iObj.document.writeln(<html><head>);
  6. iObj.document.writeln(<style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>);
  7. iObj.document.writeln(</head><body></body></html>);
  8. iObj.document.close();

这两个对象的资料可参考:http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx

firebug测试以上代码性能,如图

注释掉 iObj.document.designMode = ‘On’;

iObj.document.contentEditable = true;

如图:

效果没有变,时间效率是注释前的将近三倍。嘿嘿。那两个对象是参考网络一些人的写法,重写iframe里内容,其实没有必要用designMode和contentEditable,除非有其他的需求。

四、iframe自适应高度

有了上面的原理要实现这个相当简单,就是把iframe的height值设置成它里面文档的height值就可以。代码:

  1. window.onload = (function () { 
  2. var iObj = document.getElementById(iId);
  3. iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;
  4. });

现在对JS操作iframe你已经有了全新的认识,说不定那天会因为这个有什么新的web技术名词,嘿嘿,臭美下!

 

来源:http://www.kuqin.com/webpagedesign/20081109/26336.html

目录
相关文章
|
4月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
53 0
|
Web App开发 JavaScript 安全
如何基于 iframe 解决跨域?
一般跨域听得比较多的方案是 Nginx 代理,CORS,而 JSONP 和 iframe 的跨域解决往往只在背八股文的时候出现,而且老是只给 JSONP 的实际操作手段,老是找不着 iframe 的实际操作,所以这篇文章就是介绍如何基于 iframe 解决跨域
|
Web App开发 移动开发 安全
「趣学前端」关于iframe跨域通信
用技术实现梦想,用梦想打开创意之门。之前开发遇到了iframe跨域通信的问题,今天分享一下解决方案,顺便总结一波知识点。
931 1
「趣学前端」关于iframe跨域通信
|
前端开发
利用jsonp解决跨域问题
这篇文章给大家分享的是利用jsonp解决跨域问题。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
97 0
|
Web App开发 JavaScript
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
261 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
|
JavaScript 前端开发 大数据
ajax请求总是不成功?浏览器的同源策略和跨域问题详解
XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xiao
30527 0
|
JavaScript 前端开发 数据格式
【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题(Ajax跨域)
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82701029 ...
1320 0
iframe跨域解决方案
    公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面跳转和刷新,每次都得刷一下页面,而消息发送成功页的一个定位到顶部的功能,就是由于页面刷了一次导致体验不好,除了体验,这种中间页跳转的做法也很蹩脚和繁琐。
1481 0