• iframe,modaldialog父子窗口相互通信的问题


    --- 子窗口访问父窗口的window对象 ---

    打开新窗口一般有几种方法,window.open(...),window.showModalDialog(...),以及iframe中嵌套页面,另外还有window.navigate 

    (...)、window.location.href="..."、window.history.back(-1);都是实现同一页面内容跳转的,这里不讨论。

    ****************************************

    window.navigate('http://www.baidu.com'); //IE ONLY

    window.location.href='http://www.baidu.com'; // all

    window.open(URL,name,features,replace)

    参数描述
    URL 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。
    name 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。
    features 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。在窗口特征这个表格中,我们对该字符串的格式进行了详细的说明。
    replace

    一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:

    • true - URL 替换浏览历史中的当前条目。
    • false - URL 在浏览历史中创建新的条目。

    四.窗口特征(Window Features)

    channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
    directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
    fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
    height=pixels 窗口文档显示区的高度。以像素计。
    left=pixels 窗口的 x 坐标。以像素计。
    location=yes|no|1|0 是否显示地址字段。默认是 yes。
    menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
    resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
    scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
    status=yes|no|1|0 是否添加状态栏。默认是 yes。
    titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
    toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
    top=pixels 窗口的 y 坐标。
    width=pixels 窗口的文档显示区的宽度。以像素计。

    --- example: ---

    var url=document.location.href; //获得本窗口属性名
          newWin=window.open(url,'','fullscreen=1,scrollbars=0');      
          window.opener=null;//出掉关闭时候的提示窗口
          window.open('','_self'); //ie7      
          window.close();

    *********************************

     1、window.open打开子窗口:子窗口中用window.opener访问父窗口的window对象

     2、window.showModalDialog打开模态子窗口:把父窗口的window对象作为参数传入子窗口,如:

    window.showModalDialog('3.html', window);

    // -- 3.html --

    var parentWindow = window.dialogArguments

     3、iframe子页面中:用window.parent访问父窗口的window对象

    --- iframe用法总结 ---

    mpage.html:

    <!doctype html>
    <html>
    <head>
    <title>iframe about contentWindow contentDocument</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h1 id="mtitle">美丽的一天</h1>
    <p>早上吃早点,中午约会吃饭,下午K歌</p>
    <iframe id="ifrm" name="ifrmWin" src="ipage.html" frameborder="0" ></iframe>


    <script>
    function $id(id){return document.getElementById(id); }

    // ifrmNode.document 最简洁
    /*result=> chrome: undefined, firefox:undefined ,ie8:document */
    console.log($id('ifrm').document);

    //ifrmNode.contentWindow 基本兼容
    /*result=> chrome: window , firefox:window, ie8:window*/
    console.log($id('ifrm').contentWindow);

    //iframNode.contentDocument 标准且快捷
    /* result=> chrome: document, firefox:document, ie8:document */
    console.log($id('ifrm').contentDocument);

    </script>
    </body>
    </html>

    ipage.html:

    <!doctype html>
    <html>
    <head>
    <title>iframe page</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h1 id="ititle">美丽的一天的下午</h1>
    <p>吃饭看书</p>
    </body>
    </html>

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

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

    1. ie通过document.frames["ifrmWin"]获取iframe对象 ~~~ie: 可通过ifrmNode.document获得子页面的document对象
    window.onload = function () {
    alert(document.frames["ifrmWin"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
    };
    2. ie另一种方法contentWindow获取它,代码: ~~~ ie&firefox: 通过ifrmNode.contentWindow获得子页面的window对象
    window.onload = (function () {
    var iObj = document.getElementById(‘ifrm‘).contentWindow;
    alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
    });
    此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过,好事啊!嘿嘿。(网上一查,发现Mozilla Firefox
    iframe.contentWindow.focus缓冲区溢出漏洞,有脚本注入攻击的危险。
    后来听说可以在后台防止这样的事情发生,算是松了口气。不过还是希望firefox新版本可以解决这样的危险。)

    二、firefox下访问操作iframe里内容
    Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准,通过标准可以少
    写一个document,代码:~~~firefox: ifrmNode.contentDocument 直接获取到子页面的document对象
    var iObj = document.getElementById(‘ifrm‘).contentDocument;
    alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘);
    alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);
    兼容这两种浏览器的方法,现在也出来了,就是使用contentWindow这个方法。
    嘿嘿!操作iframe是不是可以随心所欲了呢?如果还觉得不爽,你甚至可以重写iframe里的内容。

    三、重写iframe里的内容
    通过designMode(设置文档为可编辑设计模式)和contentEditable(设置内容为可编辑),你可以重写iframe里的内容。代码:
    var iObj = document.getElementById(‘ifrm‘).contentWindow;
    iObj.document.designMode = ‘On‘;
    iObj.document.contentEditable = true;
    iObj.document.open();
    iObj.document.writeln(‘<html><head>‘);
    iObj.document.writeln(‘<mce:style><!--
    body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}
    --></mce:style><style mce_bogus="1">body
    {background:#000;font-size:9pt;margin: 2px; padding:
    0px;}</style>‘);
    iObj.document.writeln(‘</head><body></body></html>‘);

    iObj.document.close();

    四、iframe自适应高度
    有了上面的原理要实现这个相当简单,就是把iframe的height值设置成它里面文档的height值就可以。代码:
    window.onload = (function () {
    var iObj = document.getElementById(‘ifrm‘);
    iObj.height = iObj.contentWindow.document.documentElement.scrollHeight;});
    现在对JS操作iframe你已经有了全新的认识,说不定那天会因为这个有什么新的web技术名词,嘿嘿,臭美下!

    PS:
    1. Document.designMode
    ,Document.contentEditable在你这里的使用场景错了,他一般是应用在在线编辑器上的,如果你并不是开放给用户操作的话,根本没必
    要设置这个属性!
    2. 另外之所以要用
    window.onload,是因为页面加载中,iframe的加载顺序是在最后的,也就是说,在没用window.onload的情况下,在执行你那段
    js的时候iframe里的dom都还没加载到,这样自然是无输出的了
    3. 如果是在两个不同的子域下,上面的代码需要做小的改动。
    调用iframe的页面和被iframe的页面需要增加设置 document.domain 的代码,指明同一个根域即可。

  • 相关阅读:
    第五次实验报告
    第四次实验报告
    [_UICascadingTextStorage attributesAtIndex:effectiveRange:]: Range or index out of bounds
    真机测试时出现 could not find developer disk image问题
    UItableview正在滚动的时候进行操作容易出问题
    NSArray NSMutableArray 初始化
    日志报错Can't add self as subview
    设置statusBar状态栏颜色
    网站视频url地址获取
    ios9 xcode7以后编译需要进行的几项设置
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3771867.html
Copyright © 2020-2023  润新知