关于Iframe_forever iframe-CSDN博客

本文链接：https://blog.csdn.net/sunny123x/article/details/109800561

虽不推荐大量使用iframe，但在模拟窗口、HTML在线编辑器等场景仍会用到。它能隔离上下文网页，但大量使用会影响体验和加载速度。本文介绍了iframe的基本属性，如src、height等，还提及加载完成函数onload()以及强制刷新相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然iframe现在不推荐大量使用，但是某些时候迫不得已，比如模拟窗口，或者HTML在线编辑器等。
iframe的优点就是隔离上下文网页，缺点也很明显大量使用，打开一个网页加载过多iframe体验很不友好而且影响网页加载速度。

今天主要说说iframe的相关属性，以及加载与刷新。

 <iframe id="mapFrame" name="mapFrame"
         allowfullscreen="true"
         webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" 
         width="100%" height="100%" 
         msallowfullscreen="true"
         scrolling="no" frameborder="0"
         src=""></iframe>

iframe的一些基本属性：

src iframe页面地址，有同域跨域之分
height iframe高度
width iframe宽度
name iframe命名，可通过window.frames[xxx]被调用
scrolling iframe滚动模式
allowfullscreen，用于iframe开启全屏

iframe加载完成函数：

onload()

 <iframe id="mapFrame" name="mapFrame"
         allowfullscreen="true"
         webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" 
         width="100%" height="100%" 
         msallowfullscreen="true"
         scrolling="no" frameborder="0"
         src=""  @load="iframeOnload()"></iframe>

在iframe页面加载完成时，就会进入onload函数，此间我们可以处理页面加载样式。

iframe强制刷新：

①document.getElementById(iframe的ID).contentWindow.location.reload(true);

②document.getElementById(iframe的ID).src=src;