如何替换SVG图片或如何替换div内容？

Question

我想创建一个用户脚本，用我自己的图像替换http://battlelog.battlefield.com/上的默认狗标签图像(PNG)。我尝试了几种方法，但都不起作用。

首先，我尝试了以下内容：

var images = document.getElementsByTagName ("img");
var x=0;
while(x<images.length)
{
if(images[x].src == "http://battlelog-cdn.battlefield.com/public/profile/bf3/stats/dogtags/la/defaulttag_right.png?v=3173239")
{
images[x].src = "http://site.com/test.png";
}
x=x+1;
}

在这个不起作用后，我想包括一个外部的js，但这也失败了。外部脚本：

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
               $('dogtag2-render').load('http://root.x10.bz/cdn.html');
           });
        </script>

下面是img标签所在的源代码片段：

<div id="dogtag2-render">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="320" height="200">

<desc>Created with Raphaël</desc>

<defs></defs>

<image x="10" y="0" width="256" height="148" preserveAspectRatio="none" href="http://battlelog-cdn.battlefield.com/public/profile/bf3/stats/dogtags/la/defaulttag_right.png?v=3173239"></image>

</svg>

</div>

你能告诉我我哪里做错了吗？

Answer 1

尝试使用内容脚本而不是greasemonkey脚本。http://code.google.com/chrome/extensions/content_scripts.html

如果您在manifest.json中指定以下内容，它将在您的页面上运行：

{
"name": "My Extension",
...
"content_scripts": [
{
  "matches": ["http://battlelog.battlefield.com/"],
  "js": ["jquery.js", "myscript.js"]
}
],
...
}

然后，为了找到您的图像并将其替换为新的内容，我会使用一些jQuery：

$(document).ready(function(){
$('img[src="the_old_images_src.jpg"]').attr('src','the_new_images_src.jpg');
});

希望这能有所帮助！

Answer 2

由于您愿意破坏整个div，因此这段代码应该可以为您工作，不需要jQuery：

var dogtagDiv       = document.querySelector ("#dogtag2-render");
dogtagDiv.innerHTML = '<img src="http://site.com/test.png" />';

请注意，第一次尝试失败了，因为<img>标记与SVG标记不同，我不确定您是否可以用这种方式操作<image>文档。

第二次尝试失败，因为(1) $('dogtag2-render')应为$('#dogtag2‑render')，并且(2) load()不能跨域工作。