首页

Javascript

Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

利用iframe实现跨域访问

2014年03月19日 发布 阅读(2884) 作者:Jerman

一般分两种情况:

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

同主域,不同子域跨域,设置相同的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对象!

看下面实例:
a.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. <iframe src="http://www.b.com/b.html" ></iframe>
  9. <ul id="getText"></ul>
  10. <script>
  11. function dosome(text){
  12. document.getElementById("getText").innerHTML= decodeURI(text);
  13. }
  14. </script>
  15. </body>
  16. </html>

b.html

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>无标题文档</title>
  5. </head>
  6. <body>
  7. <iframe id="myfarme" src="###"></iframe>
  8. <ul id="ct">
  9. <li>这里是内容1</li>
  10. <li>这里是内容2</li>
  11. <li>这里是内容3</li>
  12. <li>这里是内容4</li>
  13. <li>这里是内容5</li>
  14. <li>这里是内容6</li>
  15. </ul>
  16. <script>
  17. window.onload = function(){
  18. var text = document.getElementById('ct').innerHTML;
  19. document.getElementById('myfarme').src="http://www.a.com/c.html?content="+encodeURI(text);
  20. }
  21. </script>
  22. </body>
  23. </html>

c.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function(){
  8. var text = window.location.href.split('=')[1]
  9. console.log(parent.parent)
  10. parent.parent.dosome(text);
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. ddddddddddd
  16. </body>
  17. </html>

利用上面的方法二,我们可以实现iframe的跨域高度自适应!b.html页面获取自身页面的度度,传给c.html页面的location对象,c.html页面获取location对象的度度值后,访问parent.parent对象(即访问到a.html页面)。因为c.html与a.html页面在同一个域下面,所以c.html可以使用parent.parent修改a页面的iframe的高度。从而实现iframe的高度的自适应。

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处