在执行我的 javascript 之前，如何等到网页加载并填充所有控件？答案

【问题标题】：How can I wait until a web page has loaded and all controls have been populated before executing my javascript?在执行我的 javascript 之前，如何等到网页加载并填充所有控件？
【发布时间】：2017-05-23 21:29:41
【问题描述】：

好的，所以我知道这个问题读起来就像我是另一个不知道 document.ready 如何工作的人，但这有点不同。

基本上，我正在将一个旧的 Web 表单应用程序升级为可以跨平台工作的东西，该应用程序依赖于许多专有的 IE javascript。其中一项变化是从 IE 的 openModalDialog 函数迁移到 jQuery UI 的模态对话框。

这意味着我在一个网页上，在一个 iframe 中，点击一个按钮，该按钮触发另一个网页上的“window.open”，让用户选择选项。当用户选择一个选项时，会触发 index changed 事件，并在对话框中填充隐藏的文本框。这些文本框的内容应该被传递回“window.opener”并进入该页面上的文本框。

我的问题是，将这些值传递回开启程序的代码运行 before 这些文本框位于 DOM 上，但 after 其余内容在此页面已加载。即使我使用 RegisterClientScriptBlock 将 javascript 放在页面底部，在所有内容加载后，这似乎也会发生。

问题：

当我使用window.opener，并且打开器在iframe中时，打开器是iframe还是打开了iframe的文档？我认为是前者，但我不确定
如何等到文本框被填充后再将它们的值返回给打开器？
因为我只是将值传递回开瓶器，有没有更好的方法呢？索引更改函数背后的代码只是从数据库中提取文本，然后插入到这些文本框中。

任何帮助都会很棒。

【问题讨论】：

标签： javascript jquery asp.net webforms

【解决方案1】：

要回答您的第二个问题，您应该能够使用onLoad 属性。文档here。

举一个过于简单的例子：

<!doctype html>
<html>
  <head>
    <title>onload test</title>
    <script>
      function load() {
        console.log("load event detected!");
      }
      window.onload = load;
    </script>
    <script>
      const load = () => {
        console.log("load event detected!");
      } 
      window.onload = load; 
    </script>
  </head>
  <body>
    <p>The load event fires when the document has finished loading!</p>
  </body>
</html>

您也可以考虑使用 document.onLoad。这是从window.onload vs document.onload窃取的差异的解释：

window.onload

默认情况下，它会在整个页面加载时触发，包括其内容（图像、css、脚本等）

在某些浏览器中，它现在接管了 document.onload 的角色，并在 DOM 准备就绪时触发。

document.onload

当 DOM 准备好时调用它，可以在图像和其他外部内容加载之前调用。

为了进一步扩展ready 和onload 之间的区别，ready 事件发生在 HTML 文档加载之后，而 onload 事件稍后发生，此时所有内容（例如图像）也已加载。

onload 事件是 DOM 中的标准事件，而 ready 事件是 jQuery 特有的。就绪事件的目的是在文档加载后尽早发生，以便向页面中的元素添加功能的代码不必等待所有内容加载。

【讨论】：