javascript - 我可以仅通过浏览器窗口中的图像调用 Javascript 书签吗？例如:blah. com/blah.jpg？

Question

如果我在某个网址...说 http://i.imgur.com/JcxmE.jpg它只是图像文件，当调用书签时，如何使窗口/div 出现在图像上？Instapaper 就是这样做的。到目前为止，我的书签加载了一个外部 javascript 文件，该文件又创建了一个 div 并将其附加到正文。当它只是一个图像时，这不起作用。有想法吗？谢谢!

Answer 1

好吧，看起来 Firefox 仍然会在图像上渲染 DOM。 hello world 示例仅当您将其粘贴在书签中时才有效，而不是直接粘贴在网址栏中。

下面的示例只要您的浏览器呈现 DOM(即使是在纯图像 URL 上)就应该可以工作。它将把图像插入到容器元素中。

javascript:(function(){
  var doc = document,
      image = doc.getElementsByTagName('img')[0],
      container = doc.createElement('div');

  doc.body.removeChild(image);
  container.appendChild(image);
  doc.body.appendChild(container);
})();