将代码添加到<身体>使用bookmarklet标记

Adding code to <body> tag with bookmarklet

本文关键字：gt 使用 标记 bookmarklet 身体 lt 代码 添加      更新时间：2023-09-26

我正在制作一个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>')

工作小提琴

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

你不需要document.body.innerHTML

在head标签

中调用CSS
相关文章：