javascript 向下滚动 iFrame - jQuery/JS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21150201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll Down iFrame - jQuery/JS
提问by Mark S
I am trying to scroll my iFrame by clicking on a button that is not inside the iFrame and I don't know Javascript/jQuery very well yet, I am learning, so maybe someone could help me here?
I will be more specific, clicking on the image (imgcast1 to imgcast4 as you can see in the code) the iFrame will be scrolled to a certain point, if you open the iFrame src you can see the iFrame content, if you want to see the whole website but with a lot of bugs open it here:
http://www.flamingpanda.xpg.com.br/(many adsenses because of XPG and not opening in Chrome, at least no here in my PC)
HERE IS THE COMPLETE CODE:
http://jsfiddle.net/9pfzX/2/
我试图通过单击不在 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>
回答by Mark S
You can scroll by the div '#iFrameAutocast'instead of the <iframe>. Due to the cross domain policy it's much harder to manipulate the <iframe>, basically you can access the whatever's inside it with .contents(). But that doesn't work all the time I had some problems with it before and I tried it in your problem it somehow did not work.
您可以按 div'#iFrameAutocast'而不是<iframe>. 由于跨域策略，操作 . 变得更加困难<iframe>，基本上您可以使用.contents(). 但这并不总是有效，我之前遇到了一些问题，我在您的问题中尝试过，但不知何故不起作用。
var iframe = $('#iFrameAutocast frame').contents();
iframe.scrollTop(880);
Another solution is to scroll with the <iframe>'s parent '#iFrameAutocast':
另一个解决方案是与<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');
});
});
});
See this jsfiddle update: jsfiddle.net/9pfzX/3/
请参阅此 jsfiddle 更新：jsfiddle.net/9pfzX/3/
回答by Liam Flanagan
Check out thisanswer to a different post.
查看另一个帖子的这个答案。
FYI: his jsbin code doesn't actually work due to an uncaught security error, I have fixed it just so you can see the code working here.
仅供参考：由于未捕获的安全错误，他的 jsbin 代码实际上不起作用，我已经修复了它，以便您可以在这里看到代码。
TL;DR
TL; 博士
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
