zoukankan html css js c++ java

iframe 根据内容自动改变大小

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

查看全文

相关阅读:
系统维护-安全-测试等方面的开源项目
 linux命令学习
 Rancher + k8s + docker 部署资料
 个人java框架技术分析
 java十年，需要学会的Java开发体系
 IdentityServer4 经典文章
 .net core 资料网站和开源项目
 Java 学习资料网站集合
 spring cloud资料汇总
 秦九韶公式【多项式】

原文地址：https://www.cnblogs.com/ElvinLong/p/4510501.html