iframe contentwindow？iframe关闭当前窗口
大家好,今天小编来为大家解答以下的问题，关于iframe contentwindow，iframe关闭当前窗口这个很多人还不知道，现在让我们一起来看看吧！
怎么让iframe自适应高度
什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。
顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。
传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。
如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单最方便的传统处理方式：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。
如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。
Demo页面：主页面 iframe_a.html，被包含页面 iframe_b.htm和 iframe_c.html
主页面代码示例：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">
function reinitIframe(){
var iframe= document.getElementById("frame_content");
try{
iframe.height= iframe.contentWindow.document.documentElement.scrollHeight;
}catch(ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
一直执行，效率会不会有问题？
我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。
下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。
<!DOCTYPE HTML PUBLIC"
在主页面追加以下测试代码，以输出这两个值，代码示例：
<div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">
function checkHeight(){
var iframe= document.getElementById("frame_content");
var bHeight= iframe.contentWindow.document.body.scrollHeight;
var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;
alert("bHeight:"+ bHeight+", dHeight:"+ dHeight);
}
</script>
被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：
<div><button onclick="toggleOverlay()">Toggle Overlay</button>
</div>
<div style="height:160px;position:relative">
<div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
</div>
<script type="text/javascript">
function toggleOverlay(){
var overlay= document.getElementById('overlay');
overlay.style.display=(overlay.style.display=='none')?'block':'none';
}
</script>
下面列出以上代码在各浏览器的测试值：
（bHeight= body.scrollHeight, dHeight= documentElement.scrollHeight,红色=错误值,绿色=正确值）
/
层隐藏时
层展开时
bHeight
dHeight
bHeight
dHeight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Opera 181 181 300 300
Safari 184 184 303 184
暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。
但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：
function reinitIframe(){var iframe= document.getElementById("frame_content");
try{
var bHeight= iframe.contentWindow.document.body.scrollHeight;
var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;
var height= Math.max(bHeight, dHeight);
iframe.height= height;
}catch(ex){}
}
window.setInterval("reinitIframe()", 200);
这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。
如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。
可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。
这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。
在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。
这是最终的主页面的代码：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe= document.getElementById("frame_content");
try{
var bHeight= iframe.contentWindow.document.body.scrollHeight;
var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;
var height= Math.max(bHeight, dHeight);
iframe.height= height;
}catch(ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
附Demo页面：主页面 iframe_a.html，被包含页面 iframe_b.htm和 iframe_c.html
如何获取嵌套 iframe 中的元素
要获取嵌套 iframe中的元素，可通过 JavaScript使用 window.frames["iframename"].document结合选择器（如 jQuery的.find()）定位目标元素。具体步骤如下：
1.确认 iframe的名称或 ID嵌套 iframe需通过 name或 id属性标识。例如：<iframe name="myIframe" id="frame1"></iframe>若未显式设置 name，可通过 id结合 document.getElementById()获取 iframe对象，再访问其 contentDocument。2.访问 iframe的文档对象方法一：通过 window.frames使用 window.frames["iframename"].document获取 iframe的文档对象。例如：const iframeDoc= window.frames["myIframe"].document;方法二：通过 DOM选择若 iframe有 id，可直接通过 document.getElementById()获取：const iframe= document.getElementById("frame1");const iframeDoc= iframe.contentDocument;//标准浏览器//或 iframe.contentWindow.document;//兼容性写法3.使用选择器定位元素jQuery示例通过.find()方法在 iframe文档中搜索元素：const$element=$(window.frames["myIframe"].document).find("#myInput");$element.val("新值");//示例操作：设置输入框值原生 JavaScript示例使用 querySelector直接查找：const element= iframeDoc.querySelector("#myInput");element.value="新值";//原生操作4.处理跨域限制同源策略：若 iframe与父页面同源（协议、域名、端口一致），可直接访问其 DOM。跨域情况：若 iframe跨域，浏览器会阻止访问 contentDocument，需通过以下方式解决：postMessage通信：父页面与 iframe协商通过消息传递数据。
服务器配置：修改 iframe资源的 CORS策略（需服务器权限）。
代理页面：将跨域内容嵌入同源中间页。
5.完整代码示例<!--父页面--><iframe name="myIframe" src="child.html"></iframe><script>//同源情况下获取元素 const iframe= window.frames["myIframe"]; const input=$(iframe.document).find("#myInput"); input.on("click", function(){ console.log("输入框被点击！");});//或使用原生 JS const iframeDoc= document.getElementById("myIframe").contentDocument; const inputElement= iframeDoc.querySelector("#myInput"); inputElement.addEventListener("click",()=>{ console.log("原生事件监听");});</script>6.常见问题排查元素未找到：检查 iframe是否加载完成（可通过 iframe.onload事件确保）。跨域错误：确认是否违反同源策略，必要时改用 postMessage。jQuery未加载：确保页面已引入 jQuery库（若使用$符号）。总结同源 iframe：直接通过 window.frames或 DOM选择访问。跨域 iframe：需借助 postMessage或服务器调整策略。推荐实践：优先使用原生 querySelector或现代框架（如 React/Vue的 ref）管理嵌套内容。
iframe是什么意思
iframe
IFRAME元素也就是文档中的文档，或者好像浮动的框架(FRAME)。frames集合提供了对 IFRAME内容的访问。请使用 frames集合读写 IFRAME内包含的元素。例如，如果要访问 iframe内 body对象的 backgroundColor样式，语法应为:
sColor= document.frames("sFrameName").document.body.style.backgroundColor;
通过 iframe对象所在页面的对象模型，你可以访问 iframe对象的属性，但不能访问其内容。例如，访问 iframe对象的 border样式的语法应为:
sBorderValue= document.all.oFrame.style.border;
注意 iframe的属性必须使用前缀 document.all访问，例如 document.all.iframeId.marginWidth。
Internet Explorer 5.5支持浮动框架的内容透明。如果想要为浮动框架定义透明内容，则必须满足下列条件。
与 IFRAME元素一起使用的 ALLOWTRANSPARENCY标签属性必须设置为 true。
在 IFRAME内容源文档，background-color或 BODY元素的 BGCOLOR标签属性必须设置为 transparent。
参看使用透明的浮动框架可以获得关于透明浮动框架更多的信息。
此元素在 Microsoft® Internet Explorer 4.0的 HTML和脚本中可用。
此元素是一个块元素。
此元素需要关闭标签。
示例
下面的例子使用了 IFRAME元素创建了包含页面 sample.htm的框架。
<IFRAME ID=IFrame1 FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm"></IFRAME>
下面的例子返回了对 IFRAME包含的文档的 all集合的引用。
var collAll= document.frames("IFrame1").document.all
标签属性属性描述
ALIGN align设置或获取表格排列。
ALLOWTRANSPARENCY allowTransparency设置或获取对象是否可为透明。
APPLICATION APPLICATION表明对象的内容是否为 HTML应用程序(HTA)，以便免除浏览器安全模式。
ATOMICSELECTION指定元素及其内容是否可以一不可见单位统一选择。
BEGIN begin设置或获取时间线在该元素上播放前的延迟时间。
BORDER border设置或获取框架间的空间，包括 3D边框。
canHaveChildren获取表明对象是否可以包含子对象的值。
canHaveHTML获取表明对象是否可以包含丰富的 HTML标签的值。
CLASS className设置或获取对象的类。
contentWindow获取指定的 frame或 iframe的 window对象。
DATAFLD dataFld设置或获取由 dataSrc属性指定的绑定到指定对象的给定数据源的字段。
DATASRC dataSrc设置或获取用于数据绑定的数据源。
disabled获取表明用户是否可与该对象交互的值。
END end设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。
firstChild获取对象的 childNodes集合的第一个子对象的引用。
FRAMEBORDER frameBorder设置或获取是否显示框架的边框。
hasMedia获取一个表明元素是否为 HTML+TIME媒体元素的 Boolean值。
HEIGHT height设置或获取对象的高度。
HIDEFOCUS hideFocus设置或获取表明对象是否显式标明焦点的值。
HSPACE hspace设置或获取对象的水平边距。
ID id获取标识对象的字符串。
innerText设置或获取位于对象起始和结束标签内的文本。
isContentEditable获取表明用户是否可编辑对象内容的值。
isDisabled获取表明用户是否可与该对象交互的值。
isMultiLine获取表明对象的内容是包含一行还是多行的值。
isTextEdit获取是否可使用该对象创建一个 TextRange对象。
LANG lang设置或获取要使用的语言。
LANGUAGE language设置或获取当前脚本编写用的语言。
lastChild获取该对象 childNodes集合中最后一个子对象的引用。
longDesc设置或获取对象长描述的统一资源标识符(URI)。
MARGINHEIGHT marginHeight设置或获取显示框架中文本之前的上下边距高度。
MARGINWIDTH marginWidth设置或获取显示框架中文本之前的左右边距宽度。
NAME name设置或获取框架的名称。
nextSibling获取对此对象的下一个兄弟对象的引用。
nodeName获取特定结点类型的名称。
nodeType获取所需结点的类型。
nodeValue设置或获取结点的值。
offsetHeight获取对象相对于版面或由父坐标 offsetParent属性指定的父坐标的高度。
offsetLeft获取对象相对于版面或由 offsetParent属性指定的父坐标的计算左侧位置。
offsetParent获取定义对象 offsetTop和 offsetLeft属性的容器对象的引用。
offsetTop获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置。
offsetWidth获取对象相对于版面或由父坐标 offsetParent属性指定的父坐标的宽度。
onOffBehavior获取表明指定的 Microsoft® DirectAnimation®行为是否正在运行的对象。
outerHTML设置或获取对象及其内容的 HTML形式。
outerText设置或获取对象的文本。
ownerDocument设置或获取结点关联的 document对象。
parentElement获取对象层次中的父对象。
parentNode获取文档层次中的父对象。
parentTextEdit获取文档层次中可用于创建包含原始对象的 TextRange的容器对象。
previousSibling获取对此对象的上一个兄弟对象的引用。
readyState获取对象的当前状态。
readyState获取表明对象当前状态的值。
recordNumber获取数据集中生成对象的原始记录。
scopeName获取为该元素定义的命名空间。
SCROLLING scrolling设置或获取框架是否可被滚动。
SECURITY SECURITY获取表明 frame或 iframe的源文件是否应用了特定的安全限制的值。
sourceIndex获取对象在源序中的依次位置，即对象出现在 document的 all集合中的顺序。
SRC src设置或获取要由对象装入的 URL。
STYLE为该设置元素设置内嵌样式。
SYNCMASTER syncMaster设置或获取时间容器是否必须在此元素上同步回放。
SYSTEMBITRATE获取系统中大约可用带宽的 bps。
SYSTEMCAPTION表明是否要显示文本来代替演示的的音频部分。
SYSTEMLANGUAGE表明是否在用户计算机上的选项设置中选中了给定语言。
SYSTEMOVERDUBORSUBTITLE指定针对那些正在观看演示但对被播放的音频所使用的语言并不熟悉的用户来说是否要渲染配音或字幕。
TABINDEX tabIndex设置或获取定义对象的 Tab顺序的索引。
tagName获取对象的标签名称。
tagUrn设置或获取在命名空间声明中指定的统一资源名称(URN)。
TIMECONTAINER timeContainer设置或获取与元素关联的时间线类型。
TITLE title设置或获取对象的咨询信息(工具提示)。
uniqueID获取为对象自动生成的唯一标识符。
UNSELECTABLE指定该元素不可被选中。
VSPACE vspace设置或获取对象的垂直边距。
WIDTH width设置或获取对象的宽度。
iframe contentwindow的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于iframe关闭当前窗口、iframe contentwindow的信息别忘了在本站进行查找哦。