向下滚动iFrame - jQuery / JS [英] Scroll Down iFrame - jQuery/JS

问题描述

我试图通过点击不在iFrame内的按钮来滚动我的iFrame，但我还不太了解Javascript / jQuery，但我正在学习，所以也许有人可以帮助我呢？
我会更具体点击图片（imgcast1到imgcast4，如您在代码中看到的那样），iFrame将滚动到某个点，如果您打开iFrame src，则可以看到iFrame内容，如果你想看到整个网站，但有很多错误打开它在这里：

http://www.flamingpanda.xpg.com.br/ （很多adsense因XPG而未在Chrome中打开，至少在我的电脑中没有这个）

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

 < table height =424pxwidth =288px > 
< tr>< td>< img onclick =AutocastRoll（）name =imgcast1id =imgcast1src =Img / cast1img.png/>< / td>< ; / TR> 
< tr>< td>< img name =imgcast2id =imgcast2src =Img / cast2img.png/>< / td>< / tr> 
< tr>< td>< img name =imgcast3id =imgcast3src =Img / cast3img.png/>< / td>< / tr> 
< tr>< td>< img name =imgcast4id =imgcast4src =Img / cast4img.png/>< / td>< / tr> 
  

  // iframe将滚动到440PX THEN 880PX（总是+ 440PX）... 
< div id =iFrameAutocast>< iframe name =iframepopupid =iframepopupscrolling =noframeborder =0width =376pxheight =439pxsrc =http://www.flamingpanda.xpg.com.br/iFrameAutocast1.html>< / iframe>< / DIV> 
  

-

 <脚本> 
 $（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'：

  $（文档）.ready（函数（）{
 
 var by = 440; //滚动增量
 / *基于您的标记结构和您试图实现的内容
您可以使用.each（）将其缩小，并通过增量滚动
 * / 
 $（'tr td img'）。each（function（index）{
 $（this）.click（函数（）{
 $（'＃iFrameAutocast'）。scrollTop（by * index）
 //或用一些动画：
 // $（'＃iFrameAutocast'）。animate（{ scrollTop：by * index}，'slow'）; 
}）; 
}）; 
 
}）; 
  

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

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/

<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>

解决方案

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.

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

Another solution is to scroll with the <iframe>'s parent '#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/

这篇关于向下滚动iFrame - jQuery / JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！