如何通过书签将 div 添加到网页？

Question

所以我正在制作一款类似于 Kick Ass 的视频游戏，这是一款可以在任何网站上玩的游戏。然而，这将是一个使用 DOM 和 JS 来移动和操作一切的角色扮演游戏。唯一的麻烦是，我需要能够在有人点击小书签时将字符 div 添加到网页。

是否可以使用小书签将带有集合 class 的全新 div 添加到网页末尾？

Answer 1

是的，使用如下代码：

var div = document.createElement('div');
div.className = 'some-class';
// set other properties here
document.body.appendChild(div);

Answer 2

第一个回答是正确的，这应该有效，我也很快写了一个例子..它对这个 Whosebug 页面中现有的 styles/classes 做了一些基本的事情..

花时间找到一种不需要那么多级别的样式 children 并快速谷歌搜索 what/how 书签有效..无论如何..

javascript: (function () { 
    alert('script running, click ok and i should scroll to the bottom');
    var oDiv = document.createElement('div'); 
    var oSpan = document.createElement('span'); 

    oDiv.setAttribute('class','topbar');   
    oDiv.setAttribute('style','color:#fff; text-align:center;');   
    oSpan.innerHTML = "I WAS ADDED USING A EXTERNAL CODE";   

    document.body.appendChild(oDiv); 
    oDiv.appendChild(oSpan); 

    window.scrollTo(0,document.body.scrollHeight);

}());

以上示例是完整的复制和粘贴示例，我已经在 windows 上用 chrome 进行了测试。但是需要 IE >= 9

如何使用/创建小书签

将以上脚本复制到剪贴板
在浏览器中创建一个新书签
随便给书签命名，例如 "Add Footer"
将此代码粘贴到书签的 URL 中
保存书签/您所做的更改
在此页面上，打开您创建的书签...它将执行代码

您应该会在页面底部看到一个带有白色字样 "I WAS ADDED USING A EXTERNAL CODE" 的黑条，这仅适用于桌面设备。移动设备会有所不同。

备注

我认为在这里使用匿名函数是一种很好的做法
请记住，网站上的某些元素/样式是由 javascript 生成的。因此，在这种情况下，即使您分配 class，它也可能看起来并不总是一样或根本不做任何事情。
您将看到带有 "Inspect Element" 的元素，但 "View Source" 不会，因为这将请求免费的网页副本，但不会更改并向您显示来源。
如果您使用的脚本比上面更大，最好通过附加一个链接到文件的脚本标签来执行它。

在代码/服务器端变得棘手——我将基于使用PHP服务器端..

如果您想做更复杂的事情，例如记录有多少人使用了您的书签或其他需要存储或访问信息的东西。

您可以将小书签托管为 javascript 文件，并使用追加脚本标记方法来调用您的脚本。

这将始终保持它的轻量级，并且可以通过使用 PHP 生成脚本来实现动态。只需在 php 文件中使用 javascript Header。

您可以轻松地使用 PHP 来计算脚本被调用/访问的次数。

或者我个人的方法是使用 ajax 的形式向您的 PHP 服务器发送和接收数据/请求。这意味着使用基本的 GET/POST 类型请求。

最后，您可以拥有一个在自定义菜单中加载的小书签，根据网站定位最佳位置和样式以显示其自身，并显示带有网站各种控件的实时数据流。

这应该涵盖一些事情，各种来源：http://code.tutsplus.com/tutorials/create-bookmarklets-the-right-way--net-18154

编辑 - Canvas 给你的例子

javascript: (function () { 
    alert('script running, click ok and i should scroll to the bottom');
    var oDiv = document.createElement('div');   
    oDiv.setAttribute('class','character');   
    oDiv.setAttribute('style','color:#fff; text-align:center;');      

    var oCanvas = document.createElement('canvas');   
    oCanvas.setAttribute('class','gameCanvas');   
    oCanvas.setAttribute('style','width: 100%; height:100%; z-index:999999; position:absolute; left:0px; top:0px; background-color:#d00;');   

    document.body.appendChild(oDiv);    
    document.body.appendChild(oCanvas);   

}());

在这个例子中，我对您的 scribblehub js 进行了一些更改。主要是应用到 canvas 的样式，它正在添加中。但是不可见...所以此示例应始终在顶部显示一个完整尺寸的红色。增加 z-index 并添加背景颜色。使用绝对位置，因为这会将其移动到左上角...而不是页面底部。

还重命名了变量，因为有一个名为 canvas 的 js 变量是个坏主意

如何通过书签将 div 添加到网页？

How to add a div to a webpage via a bookmark?

html

javascript

css

jquery

dom