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

Posted 小妖云汐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于Js实现放大缩小html页面整体的主要内容,如果未能解决你的问题,请参考以下文章

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

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

pc端 前端页面 js灯箱效果能放大缩小吗

怎么用js实现点击页面上的div慢慢放大,再次点击慢慢缩小。在同一个div

怎么用js实现图片的缩小?

javascript高手请进!关于就js控制网页图片放大缩小的问题