在活动引导轮播幻灯片中定位 iframe 元素并向 SRC 属性添加哈希？

Posted 2023-05-09

【中文标题】在活动引导轮播幻灯片中定位 iframe 元素并向 SRC 属性添加哈希？

【英文标题】：Target iframe element in active Bootstrap carousel slide and add a hash to the SRC attribute?

【发布时间】：2017-07-11 20:39:04

【问题描述】：

我在我的页面上的 Bootstrap carousel 中嵌入了 iframe 元素。这是我的 html：

<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe src="http://iframe.url/index.html"   frameborder="0"></iframe>
</div>
<div class="item">
<iframe src="http://another.iframe.url/index.html"   frameborder="0"></iframe>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

我需要帮助编写一个以可见幻灯片为目标并将#play 附加到 iframe 元素 SRC 属性的脚本。我想我可以通过定位在轮播中显示幻灯片时自动设置的 Bootstrap .item .active 类来做到这一点。

例如，活动幻灯片 iframe 元素应如下所示：<iframe src="http://another.iframe.url/index.html#play" width="300" height="600" frameborder="0"></iframe>

我如何使用 javascript 或 jQuery 来完成此任务？感谢您的帮助。

我开始在这里写一个想法来实现这一点，但它不起作用：

// Trigger Active Slide to Play
$('.carousel').carousel().on('slid.bs.carousel', function(e) 
$(this).find('.active.item').('iframe', e.relatedTarget) 
    $(this).attr('src', $(this).attr('src') + '#play');
);
);

编辑 我一直在尝试提出解决方案。这仍然不起作用，但我认为它越来越接近我正在寻找的东西：

// Trigger Active Slide to Play
$('.carousel').on('slid.bs.carousel', function() 
var activeItem = $(this).find('.active.item');
if (parent().is(activeItem)) 
    $(this).find('iframe').attr('src', function() 
        return $(this).attr('src') + "#play"
    )
    
);

【参考方案1】：

有一个工作代码：

    $('.carousel').on('slide.bs.carousel', function () 
      $(this).find('.active.item').attr('src', function()
        return $(this).attr('src') + "#play"
      )
     );

你在“slide.bs.carousel”中有错字，也没有必要尝试使用事件，否则逻辑没问题。

确保在 #play 处于非活动状态时将其删除。

【讨论】：

这似乎将逻辑添加到 iframe 元素上方的 div 中。脚本运行时会发生这种情况：<div class="item active" src="undefined#play"> iframe 元素是此 div 的子元素。如何更改此脚本以针对子 iframe 元素而不是 .active.item？

$('.carousel').on('slide.bs.carousel', function () $(this).find('.active.item').children('iframe' ).attr('src', function() return $(this).attr('src') + "#play" ) );将 children('iframe) 添加到目标 iframe。