动态生成（改变）iframe中的内容

最新推荐文章于 2025-06-08 00:03:24 发布

leeking888

最新推荐文章于 2025-06-08 00:03:24 发布

阅读量9.6k

点赞数

文章标签： iframe button firefox 文档 function input

本文介绍了如何使用JavaScript动态生成并操作iframe中的内容，包括创建iframe、切换可编辑模式、修改HTML内容等基本操作，并提供了两种实现方法。重点在于理解和应用iframe的DOM API来实现网页元素的灵活控制。

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

动态生成（改变）iframe中的内容

<html>
<body>
<script>
var ifr = document.createElement("iframe");
document.body.appendChild(ifr);
var ifrdoc = ifr.contentWindow.document;
var s = fixingHTB.innerHTML; //进入可编辑模式前存好
ifrdoc.designMode = "on"; //文档进入可编辑模式
ifrdoc.open(); //打开流
ifrdoc.write(s);
ifrdoc.close(); //关闭流
ifrdoc.designMode ="off"; //文档进入非可编辑模式
</script>
</body>
</html>

注：ifr.contentWindow.document.body.innerHTML可以读取到iframe连接页面的内容，理解了这个才是关键。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

另外一种实现

<HTML>
<script>
var i = 0 ;    //全局变量，记录当前有几个IFrame
function allSubmit()
{

for (j=1;j <=i;j++) { eval('iframe'+j+'.document.all("form1").submit();');
   }

}

function addIframe()
{
var If=document.createElement("iframe");
If.style.height="100px";
If.style.width="300px";
If.id="iframe"+(++i);
//document.all("sp").innerHTML=document.all("sp").innerHTML+" <iframe id=iframe" +(++i)+ " src='' width=300 height=100> </iframe>";
document.all("sp").appendChild(If);//===========Dom API to add Iframe
var doc1 = window.frames["iframe" + i].document;
//doc1.open();
doc1.write(" <HTML>this is test </HTML>");
}
</script>
<body bgcolor="#ffffff" text="#000000" >
<div id = sp>
</div>
<br> <br>
<input type="button" onclick="allSubmit()" value="全部提交">
<input type="button" onclick="addIframe()" value="增加IFrame">
</body>
</html>