如何注入 jQuery 并在同一个小书签中使用它？

Question

我可以成功地将 jQuery 注入到带有以下小书签的页面：

javascript: void((function(doc) {
    if (typeof jQuery == 'undefined') {
        var script_jQuery = document.createElement('script');
        script_jQuery.setAttribute('src', 'https://code.jquery.com/jquery-latest.min.js');
        Node.prototype.appendChild.call(document.body, script_jQuery);
        console.log('jQuery included ^_^');
    } else {
        console.log('jQuery already included ...');
    }
})(document));

有没有办法在同一个小书签中使用刚刚注入的 jQuery？我试着把 console.log(jQuery.toString()) 放在 apend 部分之后，但它没有用。在我看来 jQuery 只能在小书签完成后使用。

Answer 1

使用新脚本元素的 onload 回调来初始化您自己的 jQuery 代码

(function(doc) {

  function doStuff() {
    console.log('jQuery version ', $.fn.jquery, ' loaded')
    $('h1').text('Updated Title').css('color', 'red');
  }

  if (typeof jQuery == 'undefined') {
    var script_jQuery = document.createElement('script');
    script_jQuery.src = 'https://code.jquery.com/jquery-latest.min.js';

    // call doStuff() after jQuery.js loads
    script_jQuery.onload = doStuff;

    doc.body.appendChild(script_jQuery);
    console.log('script_jQuery appended to body');
    
  } else {
    console.log('jQuery already included ...');
    // initialize your code using existing version
    doStuff();
  }
})(document)

<h1>Blank</h1>

如何注入 jQuery 并在同一个小书签中使用它？

how to inject jQuery and use it in the same bookmarklet?

javascript

jquery

bookmarklet