我正在制作一个书签,在其中为用户提供任何页面上的导航链接。我有我需要的代码,但在使用 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>";
但无论我做什么,我似乎都找不到问题所在。
我还尝试通过“html编码器”之一运行它,认为引号是问题所在,但这也不起作用。
我做错了什么?
最佳答案
你的双引号是一个问题——最快的解决方法是在你的字符串周围使用单引号。此外,在 body 元素上使用 innerHTML 方法实际上会删除 body 的全部内容并将其替换为新元素。如果您只想附加(添加到)正文,请改用 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>')
关于javascript - 使用小书签将代码添加到 <body> 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26761236/