最近工作遇到一个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=" 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>