我正在尝试通过单击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>
您可以按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/
查看另一篇文章的答案。
仅供参考:由于未捕获的安全错误,他的jsbin代码实际上不起作用,我已经修复了它,以便您可以在此处看到代码。
博士
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}