javascript - 加载小书签时未捕获的 ReferenceError

Question

我正在尝试构建一个简单的 Bookmarklet，它将一些外部 Javascript 加载到页面中，目标是将像 Stackoverflow 那样的 Markdown 编辑器添加到另一个站点。我可以使用它，但它需要我点击我的 Bookmarklet 按钮 2 次而不是 1 次。

第一次点击会出现这个错误...

Uncaught ReferenceError: Markdown is not defined init.js:46

第 46 行是这样的......

var converter1 = Markdown.getSanitizingConverter();

现在，在第二次单击我的 Bookmarklet 之后，一切都运行得很好，但第一次单击总是会出现该错误，并且什么都不做。

这是 Bookmarklet 文件的代码，请帮助我修复，我的 Javascript 技能不是太好。

加载外部JS和CSS文件

function loadScripts(scriptURL) {
    var scriptElem = document.createElement('SCRIPT');
    scriptElem.setAttribute('language', 'JavaScript');
    scriptElem.setAttribute('src', scriptURL);
    void(document.body.appendChild(scriptElem));
}

// Load these 3 Javascript files into the page
// jQuery is already loaded into the page being used so no need to load it
loadScripts('http://codedevelopr.com/labs/javascript/forrst/Markdown.Converter.js');
loadScripts('http://codedevelopr.com/labs/javascript/forrst/Markdown.Sanitizer.js');
loadScripts('http://codedevelopr.com/labs/javascript/forrst/Markdown.Editor.js');

// Load the CSS file into the Page
var head = document.getElementsByTagName('head')[0];
$(document.createElement('link')).attr({
    type: 'text/css',
    href: 'http://codedevelopr.com/labs/javascript/forrst/demo.css',
    rel: 'stylesheet'
}).appendTo(head);

加载文件后，我们运行这个...

// Find and replace the curent textarea with the HTML we
// need for our markdown editor to work 
$(document).ready(function () {
    var htmlToReplace = ' \
  <div class="wmd-panel"> \
    <div id="wmd-button-bar"></div> \
      <textarea class="wmd-input" id="wmd-input" name="description"></textarea> \
  </div> \
  <div id="wmd-preview" class="wmd-panel wmd-preview"></div>';

    $("#description").replaceWith(htmlToReplace);

    //Run the Markdown editor!
    var converter1 = Markdown.getSanitizingConverter();

    var editor1 = new Markdown.Editor(converter1);
    editor1.run();

});

Answer 1

在您使用 markdown 时，您的脚本文件尚未加载。您只是发送了请求。您必须等到收到并解析响应。

我已经稍微清理了你的代码，就像你使用 jQuery 一样:

var urls = [
  'http://codedevelopr.com/labs/javascript/forrst/Markdown.Converter.js',
  'http://codedevelopr.com/labs/javascript/forrst/Markdown.Sanitizer.js',
  'http://codedevelopr.com/labs/javascript/forrst/Markdown.Editor.js'
];

// map urls to getScript calls, and pass them to $.when
$.when.apply($, $.map(urls, $.getScript)).then(function() {
  // use markdown here
});

$("<link>", {
  href: 'http://codedevelopr.com/labs/javascript/forrst/demo.css',
  rel: 'stylesheet'
}).appendTo("head");