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

我是 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: 并附加最小化的代码时，无论我尝试什么，我都无法让它工作。如果有人可以帮助我完成这项工作，那将是一个很大的帮助，谢谢。

最佳答案

是的，你的代码有错误。我想向您展示如何自己找到它，而不仅仅是说它在哪里，所以这里有一个微教程；)

从您的 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]');
    }
}

从代码中删除换行符，并在代码前加上 javascript: 协议(protocol)，以便 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]');     } }

将您的书签创建为书签并确保其可访问(即可见，以便您可以在任何 Chrome 窗口中单击它)。

转到您将测试书签代码的页面。

按住 CTRL + SHIFT + I 打开开发者工具。

切换到名为 Console 的选项卡。

单击书签。

控制台现在应该向您显示在执行您的 bookmarlet 代码时发出的错误/警告。

对于您的代码，它会吐出:

Uncaught TypeError: Cannot call method 'search' of null (program):1
(anonymous function)

这似乎是合理的，因为 search() 是在包含 str 属性值的 ID 值上调用的，但并非所有 IMG 标签都分配了 id。

很酷的是，您可以单击窗口右侧的 (program):1 并调试代码、检查变量等。

关于javascript - 简单的书签在 chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14439430/