Question

我正在制作一个书签，在其中为用户提供任何页面上的导航链接。我有我需要的代码，但是我遇到了document.body.innerHTML的问题。

这是代码

document.body.innerHTML = "<style>
body{padding:0;margin:0;}
.myFloatBar{
bottom:0;
left:0;
width:100%;
position:fixed;

}
</style>
<div class="myFloatBar">
<a href="javascript: history.back();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/back3.png" border="0"></a>
<a href="javascript: location.reload();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/refresh3.png" border="0"></a>
<a href="javascript: history.forward();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/forward3.png" border="0"></a>
</div>";

但不管我做什么，我似乎无法找到问题所在。我也尝试通过其中一个＆＃34; html编码器＆＃34;运行它，认为引号是问题，但这看起来既不起作用。

我做错了什么？

Answer 1

您的双引号是个问题 - 最快的解决方法是在字符串周围使用单引号。此外，在body元素上使用innerHTML方法实际上将删除正文的全部内容并将其替换为新元素。如果您只想追加（添加到）主体，请改用insertAdjacentHTML方法。

document.body.insertAdjacentHTML('beforeend','<style>
    .myFloatBar{
    bottom:0;
    left:0;
    width:100%;
    position:fixed;
    }
</style>
<div class="myFloatBar">
<a href="javascript: history.back();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/back3.png" border="0"></a>
<a href="javascript: location.reload();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/refresh3.png" border="0"></a>
<a href="javascript: history.forward();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/forward3.png" border="0"></a>
</div>')

Answer 2

工作小提琴

http://jsfiddle.net/fNPvf/9226/

你不需要document.body.innerHTML

在 head 标记

中调用 CSS

使用bookmarklet将代码添加到标记

2 个答案: