#iframe系列问题#

lcodecorex 发布于2019-08-23 15:39 / 3172人阅读

摘要：何时装载完毕下面的代码能正常运行于所有的浏览器之上。由于元素包含于父级页面中，因此以上方法均不存在跨域问题。实际上提供了事件，但必须使用进行绑定。代码运行时在本地直接用浏览器打开的，地址栏是的页面，只需改为访问就行。

父页面获取子页面的window对象

/**
 * 在父页面获取iframe的window对象
 * chrome：iframeElement. contentWindow 
 * firefox： iframeElement.contentWindow 
 * ie6：iframeElement.contentWindow
 */

function getIframeWindow(iframeElement) {
    return iframeElement.contentWindow;
    //   return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow;
}

父页面获取子页面的document对象

/**
 * 在父页面获取iframe的document
 * chrome：iframeElement.contentDocument
 * firefox：iframeElement.contentDocument
 * ie：element.contentWindow.document
 * 备注：ie没有iframeElement.contentDocument属性。
 */

function getIframeDocument(element) {
    console.dir(element);
    return element.contentDocument || element.contentWindow.document;
};

iframe何时装载完毕

/**
 * 下面的代码能正常运行于所有的浏览器之上。
 * 由于iframe元素包含于父级页面中，因此以上方法均不存在跨域问题。
 * 实际上IE提供了onload事件，但必须使用attachEvent进行绑定。
 */
function iframeOnload() {
    var iframe = document.createElement("iframe");
    iframe.src = "simpleinner.htm";
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", function () {
            alert("Local iframe is now loaded.");
        });
    } else {
        iframe.onload = function () {
            alert("Local iframe is now loaded.");
        };
    }
    document.body.appendChild(iframe);
}

利用onload和attachEvent，实现iframe高度自适应

/**
     * 如果iframe的高度不足屏幕可视区域的高度，则iframe的高度 === 屏幕可视区域的高度
     * 如果iframe的高度大于屏幕可视区域的高度，则iframe的高度 === iframe自己的高度
     *  
     */
    function setFrameHeight(iframe) {
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        var offsetHeight = iframeDoc.childNodes[1].offsetHeight;
        var clientHeight = document.documentElement.clientHeight||document.body.clientHeight;
        iframe.height = offsetHeight > (clientHeight-35) ? offsetHeight : (clientHeight-35);
    }

    function iframeOnload() {
        var iframe = document.getElementById("iframe");
        if (iframe.attachEvent) {
            iframe.attachEvent("onload", function () {
                setFrameHeight(this);
            });
        } else {
            iframe.onload = function () {
                setFrameHeight(this);
            };
        }
    }

在子页面中获取父页面的window对象

/**
 * 存在跨域问题
 * 在子页面中获取父页面的window对象
 * 父页面：window.parent
 * 适用于所有浏览器
 */
console.log(window.parent);

在子页面中获取顶层页面

/**
 * 存在跨域问题
 * 在子页面中获取顶层页面
 * 顶层页面：window.top
 * 适用于所有浏览器
 */
console.log(window.top);

在子页面中获取iframe的html

/**
 * 存在跨域问题
 * 在子页面中获取iframe的html
 * window.frameElement
 * （类型：HTMLElement）
 * 适用于所有浏览器
 */
console.log(window.frameElement);

子页面调用父页面的方法

parent.window.parentMethod();

父页面调用子页面的方法

FrameName.window.childMethod();

BUG##Blocked a frame with origin "null" from accessing a cross-origin frame.

跨页面操作涉及域的概念（origin），错误的意思是：未捕获的安全错误：阻止了一个域为null的frame页面访问另一个域为null的页面。代码运行时在本地直接用浏览器打开的，地址栏是file:///的页面，只需改为localhost访问就行。

GPU云服务器云服务器 iframe载入数据问题 ifram iframe webrtc iframe

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102396.html

预加载系列二：让File Prefetching丝丝润滑无痛无痒

摘要：文件路径，上线后，丝丝润滑无痛无痒，完美第四个版本，可以做更多注意哦，重点来咯尽早加载是减少首屏时间的关键引申阅读，直接把到里是个不错的方案。 showImg(https://segmentfault.com/img/bVsmpw); 所谓 File Prefetching 就是在一个页面加载成功后，默默去预加载后续可能会被访问到的页面的资源。前端资源预加载其实没啥新鲜的，我们倒...

xcc3641 2019-08-06 13:14 评论0 收藏0
iframe,我们来谈一谈

摘要：通常我们可以在后配置各种指定资源路径，有如果你未指定的话，则是使用规定的加载策略默认配置就是同域这里和有一点瓜葛的就是和就是用来指定的有效加载路径。某大咖说: iframe是能耗最高的一个元素，请尽量减少使用某大牛说: iframe安全性太差，请尽量减少使用...wtf, 你们知不知道你们这样浇灭了多少孩纸学习iframe的热情和决心。虽然，你们这样说的我竟无法反驳，但是ifram...

awesome23 2019-08-21 13:29 评论0 收藏0
〔总结系列〕前端面试题精华筛选

摘要：所谓同源是指协议域名端口三者相同，即便两个不同的域名指向同一个地址，也非同源。那么怎样解决跨域问题的呢通过跨域跨域跨域跨域跨域资源共享代理跨域中间件代理跨域音乐教程老师有用到协议跨域后端在头部信息里面设置安全域名公司后端给解决过持续更新中 JavaScript篇如何获取浏览器URL中查询字符串中的参数？ 1.封装方法 getUrlArgs(url) { const args =...

lyning 2019-08-02 12:01 评论0 收藏0
〔总结系列〕前端面试题精华筛选

摘要：所谓同源是指协议域名端口三者相同，即便两个不同的域名指向同一个地址，也非同源。那么怎样解决跨域问题的呢通过跨域跨域跨域跨域跨域资源共享代理跨域中间件代理跨域音乐教程老师有用到协议跨域后端在头部信息里面设置安全域名公司后端给解决过持续更新中 JavaScript篇如何获取浏览器URL中查询字符串中的参数？ 1.封装方法 getUrlArgs(url) { const args =...

Thanatos 2019-08-29 17:16 评论0 收藏0
网页中下载文件的相关总结

摘要：对于通过去下载文件时跨域的问题有一个解决思路是自己写一个代理服务代理服务负责在服务端下载文件并配置好跨域相关的信息然后请求走代理服务进行下载。 0. 概述文件下载是web应用中很常见的场景，在浏览器中下载文件, 最基本的方式就是——在页面内隐藏iframe, 然后将文件下载地址加载到iframe中, 从而触发浏览器的下载行为。此外, html5引入a标签的download属性, ...

shusen 2019-08-02 15:57 评论0 收藏0