• H5之iframe


    iframe 属于HTML的三种结构之一的框结构(其余两种树结构和层结构),iframe是一个拥有独立窗体的标签,他非常损耗资源,不易过多使用

                    <iframe src="nov24.html" width="100%" height="100%" frameborder="0" name="iframea"></iframe>
    		<p><a href="https://www.baidu.com" target="iframea">BAIDU.COM</a></p>  

    上面是一个简单的iframe 


    iframe是否会阻塞页面的加载呢,答案是的,通常页面首先会进行解析渲染,将html 文件解析为dom树,在将css文件解析为css树,最后合成为render树,此时进行layout 计算各个元素节点在屏幕的位置,然后进行回流(当元素本身结构发生变化时)重绘(当元素本身属性发生变化时,结构不变)最后渲染在浏览器上,这些操作完成之后才能进行onlaod事件加载,执行js操作。

    如果此时有iframe嵌入在页面中,那么渲染时需要等子页面渲染完成之后才能进行父页面的渲染,onload事件加载也会因此被阻塞

    如果此时我们用js动态生成iframe,并且放在onload事件之后去触发,那么此操作在chrome中不会阻塞页面的onload事件,但其他浏览器的onload事件依旧会被阻塞。

    浏览器 chrome safari firefox ie
    是否阻塞浏览器页面渲染 true true true true
    是否阻塞浏览器页面onload事件 false true true true

    二、跨域

    document.domain是比较常用的跨域方法。实现最简单但只能用于同一个主域下不同子域之间的跨域请求,比如 foo.com 和 img.foo.com 之间,img1.foo.com 和 img2.foo.com 之间。只要把两个页面的document.domain都指向主域就可以了,比如document.domain='foo.com';。
    设置好后父页面和子页面就可以像同一个域下两个页面之间访问了。
    父页面通过ifr.contentWindow就可以访问子页面的window,子页面通过parent.window或parent访问父页面的window,接下来可以进一步获取dom和js。

  • 相关阅读:
    springcloud-EurekaServer模块
    springcloud-消费者订单模块
    springboot配置热部署
    swagger依赖和配置类
    springcloud-支付模块构建
    jQuery基础
    JavaScript之实例
    JavaScript之DOM
    JavaScript之BOM
    JavaScript函数与对象
  • 原文地址:https://www.cnblogs.com/maoxiaodun/p/10011375.html
Copyright © 2020-2023  润新知