使用带缩放和滚动的网页加载IFrame
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用带缩放和滚动的网页加载IFrame相关的知识，希望对你有一定的参考价值。
我正在使用以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Receiver</title>
<style type='text/css'>
html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
body {background: #FFF;}
#iframe {width: 100%; height: 100%;}
</style>
</head>
<body>
<iframe src='' frameborder='0' scrolling='yes' marginheight='0' marginwidth='0' seamless='seamless' id='iframe'></iframe>
<script type='text/javascript'>
window.onload = function() {
updateFrameScale('some url here', 0, 200, 0.2);
};
function updateFrameScale(url, scrollX, scrollY, scale) {
document.getElementById('iframe').src = url;
document.ready(function() {
$("html,body").scrollTo(scrollX, scrollY);
var scaleVar = 'scale('+scale+')';
document.body.style.webkitTransform = scaleVar; // Chrome, Opera, Safari
//document.body.style.msTransform = scaleVar; // IE 9
//document.body.style.transform = scaleVar; // General
});
}
</script>
</body>
</html>
IFrame加载了网页，但没有滚动或缩放。我是一个JavaScript菜鸟，所以也许有一些非常明确的东西，但我看不到它。
答案
更新：
<!DOCTYPE html>
<html>
<head>
<title>Receiver</title>
<style type='text/css'>
html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
body {background: #FFF;}
#iframe {width: 100%; height: 100%;}
</style>
</head>
<body>
<iframe
frameborder='0'
scrolling='yes'
marginheight='0'
marginwidth='0'
seamless='seamless'
id='iframe'></iframe>
<script type='text/javascript'>
updateFrameScale('some url here', 0, 200, 0.2);
function updateFrameScale(url, scrollX, scrollY, scale) {
var iframe = document.getElementById('iframe');
iframe.src = url;
iframe.onload = function() {
this.contentWindow.scrollTo(scrollX, scrollY);
var scaleVar = 'scale('+scale+')';
document.body.style.webkitTransform = scaleVar; // Chrome, Opera, Safari
//document.body.style.msTransform = scaleVar; // IE 9
//document.body.style.transform = scaleVar; // General
};
}
</script>
</body>
</html>
另一答案
感谢@iJack用户的帮助，我解决了我的问题。我用他的代码来解决比例问题。关于滚动我使用了一个使用div元素的解决方法。这里是最终的代码：
<!DOCTYPE html>
<html>
<head>
<title>Receiver</title>
<style type='text/css'>
html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
body {overflow:hiddent; background: #FFF;}
#mydiv {border-style: inset; border-color: grey; overflow: scroll; height: 100%; width: 100%}
#iframe {width: 100%; height: 1000%;} <!-- The trick is to set the height here to 1000% -->
</style>
<script
src="https://code.jquery.com/jquery-3.3.0.min.js"
integrity="sha256-RTQy8VOmNlT6b2PIRur37p6JEBZUE7o8wPgMvu18MC4="
crossorigin="anonymous"></script>
</head>
<body>
<div id='mydiv'>
<iframe src='' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' seamless='seamless' id='iframe'></iframe>
</div>
<script type='text/javascript'>
window.onload = function() {
updateFrameScale('https://wikipedia.org', 0, 100, 1); };
function updateFrameScale(url, scrollX, scrollY, scale) {
var iframe = document.getElementById('iframe');
iframe.src = ''; //reset
iframe.src = url;
$(document).ready(function() {
var scaleVar = 'scale('+scale+')';
document.body.style.webkitTransform = scaleVar;
document.getElementById('mydiv').scrollTop = scrollY;
document.getElementById('mydiv').scrollLeft = scrollX;
});
}
</script>
</body>
</html>
以上是关于使用带缩放和滚动的网页加载IFrame的主要内容，如果未能解决你的问题，请参考以下文章
网页中如何隐藏iframe中的垂直滚动条，但依然可以用滚轮实现页面滚动？？？求大神啊
html 如何使用带固定顶栏的iFrame加载外部网页？ //演示：http：//embed.plnkr.co/iQQPh92IMjCUoeKK6dac/ //参考：http
当 URL 包含片段时，iframe 会导致父元素在 Google Chrome 上向上滚动