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

Question

我想创建一个用户脚本来替换 http://battlelog.battlefield.com/< 上的默认狗牌图像 (PNG) /a> 用我自己的图像。 我尝试了多种方法来做到这一点，但没有一个奏效。

首先我尝试了以下操作：

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" />';

---

---

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

第二次尝试失败，因为 (1) $('dogtag2-render') 应该是 $('#dogtag2‑render') 和 (2) load( ) 无法跨域工作。