zoukankan      html  css  js  c++  java
  • iframe跨域访问

    js跨域是个讨论很多的话题。iframe跨域访问也被研究的很透了。

    一般分两种情况:

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

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

    复制代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body>
    <iframe src="http://www.b.com/b.html" ></iframe>
    <ul id="getText"></ul>
    <script>
        function dosome(text){
            document.getElementById("getText").innerHTML= decodeURI(text);    
        }
    </script>
    </body>
    </html>
    复制代码

    b.html

    复制代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body>
    <iframe id="myfarme" src="###"></iframe>
    <ul id="ct">
    <li>这里是内容1</li>
    <li>这里是内容2</li>
    <li>这里是内容3</li>
    <li>这里是内容4</li>
    <li>这里是内容5</li>
    <li>这里是内容6</li>
    </ul>
    <script>
        window.onload = function(){
            var text = document.getElementById('ct').innerHTML;
            document.getElementById('myfarme').src="http://www.a.com/c.html?content="+encodeURI(text);
        }
    </script>
    </body>
    </html>
    复制代码

    c.html

    复制代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function(){
        var text = window.location.href.split('=')[1]
        console.log(parent.parent)
        parent.parent.dosome(text);
    }
    </script>
    </head>
    
    <body>
    ddddddddddd
    </body>
    </html>
  • 相关阅读:
    ETL Pentaho Data Integration (Kettle) 插入/更新 问题 etl
    Value Investment
    sqlserver 2008r2 表分区拆分问题
    HTTP与HTTPS的区别与联系
    别人分享的面经
    饥人谷开放接口(教程)
    java内存泄漏
    单例模式
    Maven项目上有小红叉咋办
    Socket通信1.0
  • 原文地址:https://www.cnblogs.com/qingsong/p/5111463.html
Copyright © 2011-2022 走看看