• 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>
  • 相关阅读:
    docker固定IP地址重启不变
    关于 CentOS 7 里面 普通用户 Ulimit max user processes 值的问题
    CentOS tengine mysql 5.7 php 5.6
    strace 分析 跟踪 进程错误
    WPF中的字体改善
    C#数据类型-string
    WPF中的文字修饰
    Winform与WPF对话框(MessageBox, Dialog)之比较
    WPF中将四个数字字符串值(比如:"10,10,300,300")转为Rect
    WPF中嵌入Flash(ActiveX)
  • 原文地址:https://www.cnblogs.com/pigtail/p/2875310.html
Copyright © 2020-2023  润新知