将 javascript 添加到 HTML 文件并使用准备好的文档答案

【问题标题】：Adding javascript to an HTML file and using document ready将 javascript 添加到 HTML 文件并使用准备好的文档
【发布时间】：2013-02-16 06:55:36
【问题描述】：

所以我有一个无法编辑的静态 HTML 页面，我需要向其中添加 jQuery，然后在准备好的文档上进行一些 div 操作（高度）。我找到了this post，它描述了如何将其插入页面，效果很好。我将它添加到我的 javascript 文件中，并将其插入到页面中。问题是我需要在同一页面上对 $(document).ready() 执行一些操作，但它说 $ 未定义。

我想做的是这样的：

var script = document.createElement('script');
script.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

$(document).ready(function() {
   // Resize my div's to the browser window
});

但我似乎无法让它工作。这可能吗？怎么样？

【问题讨论】：

(offT) 1.2.6 有点老了，不是吗？
在使用 jQuery 之前，您必须等待脚本加载。你可以通过简单的谷歌搜索找到如何做到这一点。
@roXon 是的 :) 我刚刚从另一篇文章中复制了代码。我正在使用最新版本。
@jfriend00 你的意思是使用 $(windows).load() 吗？我做了一个简单的谷歌搜索，这就是我发现的。链接？
不，您必须实际监控脚本何时加载。普雷斯科特的回答表明了这一点。

标签： javascript jquery document-ready

【解决方案1】：

var script = document.createElement('script');
script.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js';
script.type = 'text/javascript';
script.onload = resize;                    //most browsers
script.onreadystatechange = function() {   //ie
    if (this.readyState == 'complete') {
        resize();
    }
}

document.getElementsByTagName('head')[0].appendChild(script);

function resize() {
   //code goes here
}

【讨论】：

【解决方案2】：

这是由于在 JS jQuery 文件加载之前触发了 ready 事件。这是一个很好的教程。

http://www.ejeliot.com/blog/109

虽然像这样加载你的 jQuery，但这不会帮助你的页面性能。你真的应该尽量减少你的 JS 并使用尽可能少的请求以获得最佳的用户体验。

另外，你不需要写

$(document).ready(function() { });

你可以写

$(function() { });

【讨论】：

太棒了，我会看看这个。在这种特定情况下，页面性能并不是真正的问题，我只需要让这个功能正常工作。
@jfriend00 但是他的问题是$还没有到货，对吧？