DOM 准备好后加载 iframe。准备好文件

Posted 2023-05-09

【中文标题】DOM 准备好后加载 iframe。准备好文件

【英文标题】：load iframe after DOM ready. document ready

【发布时间】：2015-07-12 16:00:36

【问题描述】：

如何延迟 iFrame 的加载？ iFrame（在页面底部）是：

A) 减慢网站加载时间 B) 与滑块冲突（请参阅我的另一个问题：滑块）

要延迟 iframe 加载，直到 DOM 准备好我正在尝试：

<iframe id="iframe_id" src="http://sourcewebsite.com" style="width:100%;height:700px;border:0px;background-color:;" frameborder="0" allowtransparency="true"></iframe>


<script type='text/javascript'> $(document).ready(function() $('iframe#iframe_id').attr('src', 'http://sourcewebsite.com'); ); </script>

我假设这需要 http://sourcewebsite.com 并将其传递给 'src' 并将其加载到 ID 为 #iframe_id 的 iframe 在 DOM 准备好之后

但是 chrome 开发者控制台告诉我：

“未捕获的引用错误：$ 未定义”

.

目前我正在考虑 (window).load 我是一个更好的方法，因为它会在滑块之后加载 iframe.. 例如：

<iframe id="iframe_id" src="http://sourcewebsite.com"..........></iframe>

$(window).load(function()  $('iframe#iframe_id').attr('src', 'http://sourcewebsite.com'); );

但我不确定这是否语法正确（尤其是脚本中的 url 和 iframe#iframe 而不仅仅是#iframe）如果有任何错误，请随时告诉我！从事情的进展来看，我确信有！

感谢您的任何提示！

编辑 - 回复：脚本：

!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- EASING SCROLL SCRIPTS PLUGIN 
<script src="assets/js/vegas/jquery.vegas.min.js"></script>
<!-- VEGAS SLIDESHOW SCRIPTS -->
<script src="assets/js/jquery.easing.min.js"></script>
<!-- FANCYBOX PLUGIN -->
<script src="assets/js/source/jquery.fancybox.js"></script>
<!-- ISOTOPE SCRIPTS -->
<script src="assets/js/jquery.isotope.js"></script>
<!-- VIEWPORT ANIMATION SCRIPTS   -->
<script src="assets/js/appear.min.js"></script>
<script src="assets/js/animations.min.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>

【问题讨论】：

$ 未定义 - 不包括 jQuery 参考。

谢谢。根据：***.com/questions/2194992/jquery-is-not-defined 该错误只能由以下三种情况之一引起：（1）您的 JavaScript 文件未正确加载到您的页面中（2）您的 jQuery 版本不完善。这可能是因为有人编辑了核心文件，或者插件可能覆盖了 $ 变量。 (3) 您在页面完全加载之前运行了 JavaScript，因此，在 jQuery 完全加载之前。--- 也许 jquery 滑块正在使用 $

【参考方案1】：

代码<script type='text/javascript'> $(document).ready(function() $('iframe#iframe_id').attr('src', 'http://sourcewebsite.com'); ); </script>直接引用了jQuery$对象，（它会在DOM准备好后执行回调）。如果此代码出现在您的 <script src="assets/js/jquery-1.11.1.js"></script> 之前，那么它将在不知道 $ 是什么的情况下执行，您应该将其移至您对 jQuery 的引用下方。

【讨论】：

谢谢杰森！将脚本移动到正文的底部有效！我之前肯定尝试过，但你不能与结果争论，DOM 在半秒内加载，而不是几秒！再次感谢杰森。希望有些人可以支持您的回复，因为我的代表不允许。我现在只需要解决由于 jquery 滑块导致的不可见 iframe 的问题：但不同的问题：***.com/questions/30009667/…