javascript - 在页面加载 Javascript 上调用函数

Question

我有一个使用 Twitter bootstrap 构建的简单响应式网站。

我有一个视频位于一个模式中，点击一个按钮就会调用并自动播放。

我想在页面加载时调用我的函数，而不是在单击按钮时调用。

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" 
data-theVideo="https://www.youtube.com/embed/44H1gmn9tBA">VIDEO</a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <div>
                <iframe width="100%" height="350" src=""></iframe>
            </div>
        </div>
    </div>
</div>

和.js

<script type="text/javascript">
  autoPlayYouTubeModal();
function autoPlayYouTubeModal() {
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function () {
      var theModal = $(this).data("target"),
          videoSRC = $(this).attr("data-theVideo"),
          videoSRCauto = videoSRC + "?autoplay=1";
      $(theModal + ' iframe').attr('src', videoSRCauto);
      $(theModal + ' button.close').click(function () {
          $(theModal + ' iframe').attr('src', videoSRC);
      });
      $('.modal').click(function () {
          $(theModal + ' iframe').attr('src', videoSRC);
      });
  });
  }
</script>

上面的一切都按预期工作，但我一直在尝试这样做(下面)以便在页面加载时调用自动播放功能。

<script>
$("document").ready(function(){

$("#videoModal").trigger("click");
});
</script>

当我将视频 modal.trigger 函数粘贴到控制台时，它会返回模态，但模态和视频永远不会启动。

感谢任何帮助。

Answer 1

应该是

$(function(){
       $('[data-toggle="modal"]').trigger("click");
});

因为模式窗口 click 事件处理程序具有自动播放选项。