Question

修改：更新详细信息以添加Firefox / Chrome行为的差异

我正在尝试创建一个将加载jQuery和jQueryUI的bookmarklet。 jQuery加载使用javascript，但我认为自从jQuery加载后我会继续使用它来进行UI加载。 不仅仅是让它发挥作用我真的很想理解为什么这不起作用。 我仍然围绕着范围/闭包/等等。但我只是不明白为什么在firefox $不起作用，但“jQuery”呢！ $在Chrome中运行良好，但我在那里遇到了一个不同的问题。

备注：
1）在FireBug / FireFox中我得到'$（“head”）未定义'
2）在Chrome中，“$”工作正常，但jQueryUI调用失败，对象[object Object]没有方法'对话' 3）回调保证jQuery在我尝试使用它时加载。在Firefox中，如果我将“$”替换为“jQuery”（例如jQuery（“head”），那么代码就可以了！。
4）页面上没有其他库已经使用$
5）更令人沮丧的是，在Firefox中如果我只是放弃并使用“jQuery”而不是“$”然后设置回调来自$（“＃jquilib”）。load（）来调用a第三个函数，jQueryUI函数，如.tabs（）和.dialog（）是不可用的，即使回调本身是由jQueryUI可用触发的！
6）在Chrome中，如果我使用setTimeout（）到100毫秒，jQueryUI问题就会消失。如果我下降到1毫秒或者某个问题仍然存在。

我正在使用此帖子中的getScript函数：http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet。

以下是我的代码：

function getScript(url,success){
    var script=document.createElement('script');
    script.src=url;
    var head=document.getElementsByTagName('head')[0],
        done=false;
    // Attach handlers for all browsers
    script.onload=script.onreadystatechange = function(){
      if ( !done && (!this.readyState
           || this.readyState == 'loaded'
           || this.readyState == 'complete') ) {
        done=true;
        success();
        script.onload = script.onreadystatechange = null;
        head.removeChild(script);
      }
    };
    head.appendChild(script);
}

function initializejQueryUI(){
    if (typeof jQuery.ui == 'undefined'){
        // jQueryUI library & jQueryUI cupertino theme
        $('head').append("<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css' type='text/css' rel='stylesheet'>");
        $('head').append("<script id='jquilib' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>");
    }
    $("#jquilib").load($("<div>jQuery & UI Loaded!</div>").dialog());
}
getScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js', initializejQueryUI); // call initializejQueryUI as callback when jQuery loads

Answer 1

好的，在批次试用后发现错误。我继续开发并继续在Chrome中开发我的脚本似乎似乎比Firefox更进一步。当我完成我的书签时，我在Firefox中随心所欲地尝试了它，它也在那里工作！这是我学到的东西：

1） $("#jquilib").load($("<div>jQuery & UI Loaded!</div>").dialog());调用不起作用，因为jQuery 删除了在处理脚本后通过追加添加的元素！重新使用getScript()函数来获取jQueryUI并将警报放在从回调调用的函数中更容易。我遇到的标签创建问题（上面问题中的第5项）是这个怪癖的结果。

参考： http://api.jquery.com/append/搜索Karl Swedberg说“是的，这是正常的”

2） Firebug似乎在控制台中使用了“$”，导致上面描述的情况，其中“$”不起作用，但jQuery（）确实有效。似乎有一些规则控制它何时释放“$”，因为如果我只是尝试再次运行脚本jQuery的$快捷方式突然起作用。这是最令人沮丧的部分，因为它使它看起来像一个范围和/或时间问题！

通过<script>？</script>在bookmarklet中加载jQuery和jQueryUI时的范围或时间问题

1 个答案: