Question

我正在尝试制作一个包含2 iframe个网站的网页，并根据其他滚动滚动一个网站。

例如 - 如果在一个站点中滚动到页面底部 - 也会滚动到底部。

这是我到目前为止写的，但它不起作用。

<html>
<head>
<SCRIPT language="javascript" type="text/javascript" src="jquery-1.3.2.js"></SCRIPT>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<SCRIPT>
$(document).ready(function()
{

//option 1
$("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
        $("#div2").scrollLeft($("#div1").scrollLeft());
    });
$("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
        $("#div1").scrollLeft($("#div2").scrollLeft());
    });

//option 2
$('#div1').contents().scroll(function(){
    $('#div2').contents().scrollTop($(this).scrollTop());
}); 
$('#div2').contents().scroll(function(){
    $('#div1').contents().scrollTop($(this).scrollTop());
});
});
//option 3
$('#div1').contentWindow.onscroll = function(e) {
   $('#div2').contentWindow.scrollTop = $('#div1').contentWindow.scrollTop;
   $('#div2').contentWindow.scrollLeft = $('#div1').contentWindow.scrollLeft;
};
</SCRIPT>
</head>
<body>
<iframe id="div1" name="div1" src="http://www.w3schools.com"> style="overflow:auto;height:500px;width:500px;border:1px solid black;">

</iframe>

<iframe id="div2" name="div2" src="http://www.w3schools.com"> style="overflow:auto;height:500px;width:500px;border:1px solid black;">

</iframe>

</body>
</html>

同步两个或更多iframe网站

0 个答案: