javascript - 使用小书签将代码添加到 <body> 标记

标签 javascript html bookmarklet

我正在制作一个书签,在其中为用户提供任何页面上的导航链接。我有我需要的代码,但在使用 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/

相关文章:

javascript - 将 Highchart 时间数据分组为周和月

html - CSS,想要将元素对齐到居中的 div 的左侧,并在其周围留出一些间距?

javascript - Instagram 自动点赞书签

Javascript 混淆输入框值

javascript - 使用 JS 在 html 中显示正确的 firebase 存储图像

javascript - 一旦所有操作完成,如何让 node.js 返回数据

javascript - VSCode & Flow - 转到定义不起作用

html - 尽管 body 高度为 100%,页脚仍然卡在中间页面

html - 使用 HTML 与 CSS 对图像进行框阴影

javascript - 为什么 window.location.href 返回大约 :blank in chrome?