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页面整体的主要内容，如果未能解决你的问题，请参考以下文章