Question

所以我正在制作类似于Kick Ass的视频游戏，这是一款可在任何网站上播放的游戏。但是，这将是一个使用DOM和JS来移动和操作所有内容的RPG。唯一的麻烦是，当有人点击书签时，我需要能够将字符div添加到网页。

是否可以使用书签将一个带有set类的全新div添加到网页的末尾？

Answer 1

是的，请使用以下代码：

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

Answer 2

第一个回答是正确的，这应该有效，我也快速写了一个例子。这对于这个stackoverflow页面中的现有样式/类做了一些基本的事情。

花费时间的是找到一种不需要这么多级别的孩子的风格，并且还快速搜索书签的工作方式和方式..无论如何......

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＆gt; = 9

如何使用/创建书签

将上述脚本复制到剪贴板
在浏览器中创建新书签
将书签命名为您想要的任何内容，例如＆＃34;添加页脚＆＃34;
将此代码粘贴到书签的网址
保存书签/您所做的更改
在此页面上，打开您创建的书签...它将执行代码

你应该看到一个带有＆＃34字样的黑条;我使用外部代码添加了＃34;在页面底部的白色，这仅适用于桌面..移动设备会有所不同。

备注

在我看来，使用匿名函数是一种很好的做法

请记住，网站上的某些元素/样式是由javascript生成的。因此，在这种情况下，即使您分配了类，它也可能看起来不一样或者根本不做任何事情。

您将看到带有＆＃34; Inspect Element＆＃34;的元素，但是＆＃34;查看源＆＃34;不会因为这将要求没有和更改网页的免费副本并向您显示来源。

如果您使用大于上述的脚本，最好通过附加链接到文件的脚本标记来执行它。

使用代码/服务器端变得棘手 - 我将基于使用PHP服务器端。

如果你想做更复杂的事情，比如说要记住有多少人使用过你的书签或需要存储或访问信息的其他人。

你会做一些事情，比如将bookmarklet作为javascript文件托管，并使用append脚本标记方法来调用你的脚本。

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

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

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

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

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

编辑 - 适合您的画布示例

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做了一些改变。主要是应用于画布的样式，它被添加..但是不可见这样...所以这个例子应该显示一个红色的全尺寸总是在顶部..增加了z-index并添加了背景颜色。使用位置绝对，因为这会将它移动到左上角...而不是页面的底部。

同样将变量重命名为具有名为canvas的js变量是一个坏主意

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

2 个答案: