Question

好的，关键是让bookmarklet加载外部js，在当前网页上创建jquery，jquery-ui和css文件，所有内容都是跨域完成的。由于某种原因，当jquery代码运行时，jquery-ui中包含的dialog（）函数不存在。我的猜测是jquery在外部脚本加载之前执行代码。

请帮忙！

 function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("http://localhost/js/jquery-1.3.2.min.js", "js") //dynamically load and add this .js file
loadjscssfile("http://localhost/js/jquery-ui-1.7.2.custom.min.js", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("http://localhost/css/redmond/jquery-ui-1.7.2.custom.css", "css") //dynamically load and add this .css file

$(document).ready(function() {
    var title = document.title;
    var location = document.location;
    var documentInfo = "url="+location+"&title="+title;


    div = $("<div id=dialog name=dialog>").html("<img src='http://localhost/ajax-loader.gif' alt='loader' style='padding-left:15px;'/>");

    $("body").prepend(div);
    $("#dialog").dialog();


    var script = $.ajax({url: "http://localhost/parse.php", data: documentInfo, async: false}).responseText;
    $("#dialog").html(script);


});

Answer 1

您已经很幸运，在$(document)中调用$ function时，您的脚本不会崩溃：）

这是一个例子。

<强> test.js

function sleep(milliseconds)
{
    var end = new Date().getTime() + milliseconds;

    while (new Date().getTime() < end);

    document.write('external script executed<br/>');
}

sleep(3000);

<强>的test.html

<html>
<head>
    <title>test</title>
    <script type="text/javascript">
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", "test.js");
        document.getElementsByTagName("head")[0].appendChild(fileref)

        document.write('page script executed<br/>');
    </script>
</head>
<body>
</body>
</html>

在写入文档之前，

test.html加载test.js。如果您希望结果为：

执行外部脚本

页面脚本已执行

......那你错了。

当您将<script>元素附加到网页的<head>时，appendChild()函数会在添加元素后立即返回，它不会等待您的脚本满载。在上面的示例中，输出将为：

页面脚本已执行

执行外部脚本

这就是为什么我说你很幸运能够在你不确定它满载的时候使用jQuery。

解决此问题的方法是将$(document).ready(...);作为脚本附加到文档的<head>。您可以期望普通的浏览器 - 如果您看到我的意思 - 将按照您将其添加到页面的顺序加载和执行脚本。

    var pageScript = document.createElement('script');
    pageScript.setAttribute("type", "text/javascript");
    var pageScriptSource = document.createTextNode("document.write('page script executed<br/>');");
    pageScript.appendChild(pageScriptSource);
    document.getElementsByTagName("head")[0].appendChild(pageScript);

使用FF和IE测试。在FF工作......

这不是一个完整的解决方案，但我没有时间（也不想）找到IE的黑客攻击;）

Answer 2

尝试使用jQuery.getScript：http://docs.jquery.com/Ajax/jQuery.getScript

您可以指定在加载脚本时运行的回调。

jQuery，加载外部文件后做一些事情

2 个答案: