iframe使用记录

柔情只为你懂 2022-02-25 06:16 238阅读 0赞

iframe确实不好用，尤其IE的支持更是非常的不好。  
以下记录几点关于iframe使用过程中认识到的点。

## 1.关于浏览器缓存 ##

浏览器缓存分为两种，from disk cache 和from memory cache，浏览器加载页面的时候，对于资源的请求，会先从memory cache中取，找不到的话，就往disk cache里找，再找不到，最后会请求网络重新获取。  
网上看到有人说，js和静态资源会存到disk cache，css会存在memory cache中，但实际上，我发现这和不同浏览器自身有关系，拿谷歌浏览器来说，会把大文件放到disk cache中。  
还有一个问题就是，如果js比较大，例如3M多，即便从disk cache中取，页面加载也很慢。  
浏览器缓存是浏览器级别的，和域名、标签没有关系，即：不管是不是在一个标签页中，不管几个iframe，只要他们请求的资源相同且浏览器缓存中，就会直接从缓存中取，即：对于同一个资源，不管是那个页面(iframe)先请求，并缓存到浏览器中，其他的页面都会使用缓存。

## 2.IE中使用iframe不加载页面 ##

经过测试发现在IE11中，如果事先指定iframe的src，会出现加载失败的情况。解决办法是等父页面onload之后，再手工指定iframe的src。我尝试了下，确实可行。

## 3.iframe白屏问题 ##

iframe在加载页面的时候，会有白屏闪现，最开始以为是页面背景色问题，有的说是设置iframe透明，但是这些都无法解决问题，造成这个问题的原因在于iframe自身，即：在iframe发起src的请求到返回的间隙这段时间，他就是会白屏，只不过有些非常快，根本察觉不到。针对这个问题，解决方案也是建议在父页面onload完成之后，再动态指定src。

## 4.vue中onload ##

基于vue-cli构建的web应用，本身是单页应用，这就意味着，当index.html首次正确加载后，window.onload事件已经加载完毕了，不存在在组件中再去动态绑定onload事件，没意义。

## 5.操作iframe ##

项目中有这样一个需求，在iframe里加载了一个页面，这个页面默认是全屏显示的，如果在iframe中点击ESC，会退出全屏，要求在父页面中给iframe监控键盘事件，并屏蔽掉ESC案件的功能。  
通过JS屏蔽键盘事件，在晚上有很多的样例代码，给document.onkeydown指定一个函数，获取window.event.keyCode==27时，return false即可。例如：

document.onkeydown = killesc; 
    function   killesc() 
    {   
    	if(window.event.keyCode==27)   
    	{   
    		window.event.keyCode=0;   
    		window.event.returnValue=false;   
    	}   
    }

但，问题是iframe其实是独立的线程，和父页面是隔离的，你不可能把这些代码写到iframe的页面中。  
那么我们是否可以通过获取iframe的document，为其绑定onkeydown事件呢？  
答案是可以的。相关操作如下

> var iframe=document.getElementById(“xxx”);//父窗口获取iframe子窗口对象  
> var iframew=iframe.contentWindow;//iframe窗口的window对象  
> var iframed=iframew.document;//iframe窗口的document对象  
> var iframed2=iframe.contentDocument;//DOM2也支持直接获取document对象

通过上述代码，可以获取到iframe的document和window对象，然后就可以尽情的操作了。  
问题是，按照上述方式，发现还是不行，会提示有跨域问题。  
原因在于，我的iframe中引入的src是外链，和父页面不是同一个域。  
非同域的页面之间是不能获取window对象和document的。

**结论：**  
iframe和父页面是同域情况下，可以在父页面任意操作iframe。  
不同域情况下，两者完全隔离，不允许父页面操作子iframe的页面。  
PS：想想这样设计也完全合乎情理，不然，我随意写个页面，把别人的网页加载进来，然后随意的修改和调整，那岂不乱套？

暂时先记录这些！