Js实现放大缩小html页面整体

Js实现放大缩小html页面整体

不包含iframe的写法

  • html代码
<body>
	<div >
    	<button onclick="enlargePage()">页面放大</button>
    	<button onclick="narrowPage()">页面缩小</button>
	</div>
	<div>这里是页面内容......</div>
</body>
  • js代码
<script type="text/javascript">
    //网页放大缩小的变量,初始值为1
    var paramNumber = 1;
    //缩小页面
    function narrowPage(){ 
    	//设置最小限制
        if(paramNumber >0.2){ 
            paramNumber -=0.1;
        }
        //缩小body
        document.getElementsByTagName('body')[0].style.zoom=paramNumber;
    }
    //放大页面
    function enlargePage(){ 
    	//设置最大限制
        if(paramNumber <5){ 
            paramNumber +=0.1;
        }
        //放大body
        document.getElementsByTagName('body')[0].style.zoom=paramNumber;
    }
</script>

包含iframe的写法

  • html代码

主页面代码:

<body>
	<div >
    	<button onclick="enlargePage()">页面放大</button>
    	<button onclick="narrowPage()">页面缩小</button>
	</div>
	<div>这里是页面内容......</div>

	<iframe id="iframeId" src="iframe-content.html" frameborder="0" style="min-height:200px;overflow:visible;" >
	</iframe>
</body>

iframe-content.html代码:

<body>
<div>这里是iframe的内容......</div>
</body>
  • js代码
<script type="text/javascript">
    //网页放大缩小的变量,初始值为1
    var paramNumber = 1;
    //如果有iframe的话,iframe也跟随主框架大小变化
    $(function(){ 
        //根据id获取子iframe元素
        var iframe = $("#iframeId")[0];
        //重新加载子iframe时,每次在子iframe加载完成后,设置子iframe的body
        if (iframe.attachEvent) { 
            iframe.attachEvent('onload', function () { 
                document.getElementById('iframeId').contentDocument
                .getElementsByTagName('body')[0].style.zoom=paramNumber ;
            })
        } else { 
            iframe.onload = function () { 
                document.getElementById('iframeId').contentDocument
                .getElementsByTagName('body')[0].style.zoom=paramNumber ;
            }
        }
    });
    //缩小页面
    function narrowPage(){ 
    	//设置最小限制
        if(paramNumber >0.2){ 
            paramNumber -=0.1;
        }
        //缩小body
        document.getElementsByTagName('body')[0].style.zoom=paramNumber;
        
        document.getElementById('iframeId').contentDocument
        .getElementsByTagName('body')[0].style.zoom=paramNumber;
    }
    //放大页面
    function enlargePage(){ 
    	//设置最大限制
        if(paramNumber <5){ 
            paramNumber +=0.1;
        }
        //放大body
        document.getElementsByTagName('body')[0].style.zoom=paramNumber;
        
        document.getElementById('iframeId').contentDocument
        .getElementsByTagName('body')[0].style.zoom=paramNumber;
    }
</script>
    原文作者:小妖云汐
    原文地址: https://blog.csdn.net/qq_42002006/article/details/120935524
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞