加载书签时未捕获的ReferenceError

时间:2012-06-12 21:57:52

标签: javascript

我正在尝试构建一个简单的Bookmarklet,它将一些外部Javascript加载到一个页面中,目标是将Stackoverflow等降级编辑器添加到另一个站点。我有它工作但它需要我点击我的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();

});

1 个答案:

答案 0 :(得分:6)

您在使用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");