文档准备好过早触发？答案

【问题标题】：document ready fires too early?文档准备好过早触发？
【发布时间】：2014-03-21 11:31:12
【问题描述】：

这是一个理论上的问题，因为它无法立即检查。问题是关于 jQuery 代码不起作用的可能原因，但是它现在已加载到页面上。此外，它会在页面加载后立即执行它必须执行的操作，并且我将此脚本代码从加载的页面的源代码复制粘贴到控制台中。

<body>
<div id="id1">...</div>
<div id="id2">some html code goes here... </div>
<script>
    jQuery(document).ready(function() {
            var el = jQuery("#id1");
            var var1 = el.width();
            el.css({'margin-top':'10px','margin-bottom':'20px'});
            jQuery("#id2").css('margin-top', var1+'px');
    });
</script>
<div>and here... </div>
</body>

附： jQuery 库已加载。 Chrome 控制台中没有错误。脚本在body标签中。

附言可能是因为 #id1 (contains) 是从另一个站点加载的，所以文档准备好提前触发了吗？这正是原因吗？还有其他可能的原因吗？

不幸的是，很难立即检查它，因为对该页面的访问受到限制，并且需要几个步骤才能让其他人无法立即访问。但是，我们需要马上找到可能的解决方案。

在 html 代码中添加了 id1 和 id2。

【问题讨论】：

试试$(window).load()
id为#id1和#id2的元素是如何加载到页面中的？
你必须等到#id1 和#id2 在页面中，然后执行你的脚本。 Dom-ready 只关心当前页面，而不关心额外加载的 html。
简短回答：不，它没有。长答案：#id1 和 #id2 元素是什么？脚本的其余部分在哪里（我假设还有更多，因为其中有语法错误）
我已将 id1 和 id2 添加到 html 代码中。 @blgt - 你能告诉我语法错误吗？谢谢。

标签： javascript jquery iframe document document-ready

【解决方案1】：

使用 window.onload 最常在元素中使用在网页完全加载完所有内容后执行脚本。

jQuery(window).load(function () {

    var el = jQuery("#id1");
            var var1 = el.width();
            el.css({'margin-top':'10px','margin-bottom':'20px'});
            jQuery("#id2").css('margin-top', var1+'px');

});

【讨论】：