简单的书签在chrome中不起作用

时间:2013-01-21 13:12:23

标签: javascript google-chrome bookmarklet

我是bookmarklet编码的新手,我遇到了一个问题,即常规javascript在浏览器中工作正常但不是bookmarklet版本。

我找到了一个书签,它找到一个图像并将其转换为BB代码并且工作正常,但它加载了jQuery,我不希望它一直这样做。所以我基本上只是试图消除它的需要,但现在它不再作为书签。

原始的书签是这样的:

javascript:document.body.appendChild(document.createElement('script')).src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js';var%20pictureurl=jQuery('img[id$=%22myImage%22]').attr('src');var%20linkurl=document.location.href;alert('%5BURL='+linkurl+'%5D%5BIMG%5D'+pictureurl+'%5B%2FIMG%5D%5B%2FURL%5D');

我的常规JS代码的javascript是:

// Create array variables
var imgs = [];

// Put all of the documents tags in to the arrays
imgs = document.getElementsByTagName('img');

var pictureurl = '';
var linkurl = document.location.href;

for(var i = 0; i < imgs.length; i++){
    var str = imgs[i].getAttribute('id');
    var find = str.search("myImage"); 
    if(find != -1){
        pictureurl = imgs[i].getAttribute('src');
        alert('[URL=' + linkurl + '][IMG]' + pictureurl + '[/IMG][/URL]');
    }
}

当我添加javascript:并附加最小化的代码时,无论我尝试什么,我都无法使其工作。如果有人能帮我这个工作那将是一个很大的帮助,谢谢。

1 个答案:

答案 0 :(得分:4)

是的,您的代码中有错误。我想告诉你如何自己找到它而不只是说它在哪里,所以这里是一个微教程;)

  1. 从JS代码中删除行注释(//),因为书签将在一行上。你最终应该得到代码:

    var imgs = [];
    imgs = document.getElementsByTagName('img');
    var pictureurl = '';
    var linkurl = document.location.href;
    for(var i = 0; i < imgs.length; i++){
        var str = imgs[i].getAttribute('id');
        var find = str.search("myImage"); 
        if(find != -1){
            pictureurl = imgs[i].getAttribute('src');
            alert('[URL=' + linkurl + '][IMG]' + pictureurl + '[/IMG][/URL]');
        }
    }
    
  2. 从代码中删除新行字符,并使用javascript:协议为代码添加前缀,以便Chrome知道内容是JavaScript代码。您的代码现在应该如下所示:

    javascript: var imgs = []; imgs = document.getElementsByTagName('img'); var pictureurl = ''; var linkurl = document.location.href; for(var i = 0; i < imgs.length; i++){     var str = imgs[i].getAttribute('id');     var find = str.search("myImage");      if(find != -1){         pictureurl = imgs[i].getAttribute('src');         alert('[URL=' + linkurl + '][IMG]' + pictureurl + '[/IMG][/URL]');     } }
    
  3. 将书签作为书签创建并确保其可访问(即可见,以便您可以在任何Chrome窗口中点击它)。

  4. 转到您将测试书签代码的页面。
  5. CTRL + SHIFT + I 打开开发人员工具
  6. 切换到名为控制台的标签页。
  7. 点击书签。
  8. 控制台现在应该显示执行bookmarlet代码时发出的错误/警告。
  9. 如果是您的代码,它会吐出:

    Uncaught TypeError: Cannot call method 'search' of null (program):1
    (anonymous function)
    
  10. 这似乎是合理的,因为search()的值调用str,其值包含ID属性,但并非所有IMG标记都有id已分配。

    有什么好处,你可以点击窗口右侧的(program):1并调试代码,检查变量等。