#iframe系列问题#

news/2024/6/18 20:54:11

父页面获取子页面的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);

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

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


http://www.niftyadmin.cn/n/3458666.html

相关文章

Java第二次上机随笔

主要是一些原来不懂但是本次上机涉及到的内容... 一、空数组与数组为null的区别 1、空数组: int[] array new int[0]; array.length 0; 空数组是一个真正的数组,只不过长度为0,它是一个真正的对象。 2、数组是null null数组是一个空引用&am…

爬虫-第二篇-数据解析

数据解析 解析:根据指定的规则对数据进行提取作用:实现聚焦爬虫聚焦爬虫的编码流程: 指定url发起请求获取响应数据数据解析持久化存储数据解析的方式: 正则bs4xpathpyquery(拓展)数据解析的通用原理是什么? 数据解析需要作用在页面源码中(一组html标签组成的)html的核心作用是…

考试防刷新、切屏效果实现

情景 在线考试模块这样一个需求: 避免学生用电脑查答案, 需要系统防止刷新、切屏或改变窗口大小,当达到次数后自动交卷。 实现 1,仿刷新。 因为浏览器都自带了刷新返回等按钮,因此只想到了弹出窗口的形式。 /* * param url 考试界面的链接 *…

Position属性四个值:static、fixed、absolute和relative的区别和用法(转自博友 Newbie_小白)...

在用CSSDIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下: 先看下各个属性值的定义: 1、sta…

爬虫-第三篇-代理,cookie,验证码,线程池

图片懒加载 有些图片网站img标签用了伪src属性,在页面加载时不会一次性加载所有图片,获取图片链接时,要注意img标签的属性,如下图,属性被修改为src2 代理 在短时间内向网站发起了一个高频的请求,会产生ConectionPool的Error,连接池(http)中的资源被耗尽,可以在请求头中设置Conn…

使用ApiPost模拟发送get、post、delete、put等http请求

现在的模拟发送请求插件很多比如老外的postman等,但亲测咱们国内的 ApiPost 更好用一些,因为它不仅可以模拟发送get、post、delete、put请求,还可以导出文档,支持团队协作也是它的特色。 另外老外的思维跟我们还是有些鸿沟&#x…

爬虫-第五篇-scrapy框架初识,持久化存储,手动请求发送

准备工作 什么是框架?如何学习框架? 就是一个集成了各种功能且具有很强通用性(可以被应用在各种不同的需求中)的一个项目模板.scrapy集成了哪些功能: 高性能的数据解析操作,持久化存储操作,高性能的数据下载的操作.....环境的安装: a. pip3 install wheelb. 下载twisted http…

出来混迟早要还的,技术债Dagger2:Android篇(上)

前言 因为工作需求,所以最近补了补之前没了解过的Dagger2的内容,基础篇已经发布。接下来就是Dagger2在Android中的应用了。当然,和我一样刚接触Dagger2的朋友,可以先看一下之前的基础文章: 出来混迟早要还的&#xff0…