gpt4 book ai didi

javascript - 使用带有缩放和滚动功能的网页加载 IFrame

转载 作者:行者123 更新时间:2023-11-30 20:49:18 25 4
gpt4 key购买 nike

我正在使用以下代码:

<!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 菜鸟,所以也许有些东西非常清楚,但我看不到。

最佳答案

感谢@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>

关于javascript - 使用带有缩放和滚动功能的网页加载 IFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48359300/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com