向下滚动 iFrame - jQuery/JS

Question

我正在尝试通过单击不在 iFrame 内的按钮来滚动我的 iFrame，而且我还不太了解 Javascript/jQuery，我正在学习，所以也许有人可以在这里帮助我？ 我会更具体，点击图片（imgcast1 到 imgcast4 可以在代码中看到）iFrame 会滚动到某个点，如果你打开 iFrame src 你可以看到 iFrame 内容，如果你想看整个网站，但有很多错误在这里打开它：
http://www.flamingpanda.xpg.com.br/（由于 XPG 而不是在 Chrome 中打开的许多广告，至少在我的 PC 中没有）

这是完整的代码： http://jsfiddle.net/9pfzX/2/

<table height="424px" width="288px">
<tr><td><img onclick="AutocastRoll()" name="imgcast1" id="imgcast1" src="Img/cast1img.png" /></td></tr>
<tr><td><img name="imgcast2" id="imgcast2" src="Img/cast2img.png" /></td></tr>
<tr><td><img name="imgcast3" id="imgcast3" src="Img/cast3img.png" /></td></tr>
<tr><td><img name="imgcast4" id="imgcast4" src="Img/cast4img.png" /></td></tr>

// IFRAME WHICH WOULD BE SCROLLED TO 440PX THEN 880PX (ALWAYS +440PX)...
<div id="iFrameAutocast"><iframe name="iframepopup" id="iframepopup" scrolling="no"   frameborder="0" width="376px" height="439px"   src="http://www.flamingpanda.xpg.com.br/iFrameAutocast1.html"></iframe></div>

-

<script>
$(document).ready(function (){
    alert("Testing jQuery: Loaded and Executed");
    $('#imgcast1').click(function() {
        //SCROLL FOWN FUNC
    });
// ---------------------------------------------
    $('#imgcast2').click(function() {
        //SCROLL FOWN FUNC
    });
// ---------------------------------------------
    $('#imgcast3').click(function() {
        //SCROLL FOWN FUNC
    });
// ---------------------------------------------     
    $('#imgcast4').click(function() {
        //SCROLL FOWN FUNC
    });

});
</script>

Answer 1

查看this 对不同帖子的回答。

仅供参考：由于未捕获的安全错误，他的 jsbin 代码实际上无法正常工作，我已对其进行了修复，以便您可以看到代码工作 here。

TL;DR

var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
    myIframe.contentWindow.scrollTo(xcoord,ycoord);
}

Answer 2

您可以滚动 div '#iFrameAutocast' 而不是 <iframe>。由于跨域策略，操作<iframe> 要困难得多，基本上您可以使用.contents() 访问其中的任何内容。但这并不总是有效，我之前遇到过一些问题，我在你的问题中尝试过它，但不知何故不起作用。

var iframe = $('#iFrameAutocast frame').contents();
iframe.scrollTop(880);

另一种解决方案是使用<iframe> 的父'#iFrameAutocast' 滚动：

$(document).ready(function () {

var by = 440;//scroll increment
/* base on your markup structure and what you are trying to achieve 
   you can trim it down using .each() and scrolling by an increment
*/
$('tr td img').each(function (index) {
    $(this).click(function () {
        $('#iFrameAutocast').scrollTop(by * index)
        //or with some animation:
        //$('#iFrameAutocast').animate({scrollTop:by * index},'slow');
    });
});

});

查看此 jsfiddle 更新：jsfiddle.net/9pfzX/3/