最近工作遇到一个iframe的问题 就是iframe需要根据内容高度变化 筛选了无数个搜索引擎返回的数据 得到以下解决方案
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight,
dHeight = iframe.contentWindow.document.documentElement.scrollHeight,
height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
原理就是 不断刷新页面获得iframe内容页面的高度 赋值给iframe
以下是整个测试页面代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ifram 内有树形节点实例</title>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight,
dHeight = iframe.contentWindow.document.documentElement.scrollHeight,
height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
</head>
<body style="background-color: red;">
<iframe scrolling="no" id="frame_content" style="width: 100%;" onload="reinitIframe();" src="./subIframe.html" frameborder="0"></iframe>
</body>
</html>
subIframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe 内容页面</title>
<style type="text/css">
body{
background: #ccc;
}
</style>
<script type="text/javascript">
function CreateNode(str)
{
//创建新div
var NewDiv = document.createElement("div");
//对div设置 id属性
NewDiv.id = "dd";
//创建div内加入的内容
var NewText = document.createTextNode(str);
//追加一个新的子结点
NewDiv.appendChild(NewText);
//返回新创建结点数据
return NewDiv;
}
function addDome() {
var node =CreateNode(‘hello world‘);
console.log(node);
document.body.appendChild(node);
}
</script>
</head>
<body>
<ul>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>hello every body 1</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
</ul>
<input type="button" value="add dome" onclick="addDome();">
<a href="./2.html">首页</a>
</body>
</html>
时间： 2024-08-05 22:04:58