Question

我正在遍历一系列网址，根据durations数组中的相应值将每个网址保持在iFrame中。

(function step(){
  $j('.marquee').attr('src',urls[i].innerHTML);
  setTimeout(step, parseInt(durations[i].innerHTML) * 1000);
  i = (i+1)%len;
})();

我希望新页面淡入，为此我尝试了这个“：

 $j('.marquee').attr('src',urls[i].innerHTML).fadeIn();

但它不像我想要的那样表现。是因为iFrame吗？如何让iFrame中的页面每次都在循环中淡入？

Answer 1

您无法在iframe中更改页面的加载。一旦更改了iframe的src，加载将在收到响应后立即开始。

你可以做的是，当src改变时暂时隐藏iframe，并调用fadeIn（）函数以产生很好的效果。像下面的东西

＆＃13;

var durations = $('.durations');
var urls = $('.urls');
var i = 0;

(function step() {

  if (i < durations.length) {
    $('.marquee').css('visibility', 'hidden');
    $('.marquee').attr('src', urls[i].innerHTML);

    console.log(i);
    console.log(durations[i]);
    i = i + 1;
    setTimeout(step, parseInt(durations[i].innerHTML) * 200);

  }
})();
$('.marquee').on('load', function() {
  $('.marquee').css('visibility', 'visible').hide().fadeIn();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<iframe class="marquee" frameborder="none"></iframe>
<div class='durations'>10</div>
<div class='durations'>20</div>
<div class='durations'>30</div>

<div class='urls'>https://www.bing.com</div>
<div class='urls'>https://www.bing.com</div>
<div class='urls'>https://www.bing.com</div>

＆＃13;

如果你想保持iframe可见，但只想淡化内容，那么你必须将脚本添加到已加载的页面，这将保持身体最初隐藏，然后onload，fadeIn内容。如果iframe内容属于单独的域，则无法从父页面访问内容。如果iframe内容属于同一个域，那么您也可以从父页面执行此操作。

如何在iFrame中旋转URL时淡入

1 个答案: