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

Question

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

是否有可能使用书签添加一个全新的div集合到网页的末尾？

Answer 1

第一个回答是正确的，这应该工作，我已经飞快地写着一个例子以及..这做了基本与现有的样式/班在此计算器页面..

什么花时间是找到一种风格，并不要求孩子这么多的水平，也很快谷歌上搜索一个书签如何工作是什么/ ..反正..

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

如何使用/创建一个书签

1. 复制上面的脚本到剪贴板
2. 在浏览器
3. 名称你想要的任何书签创建一个新的书签，例如“添加页脚”
4. 将此代码粘贴到URL的bookma RK
5. 保存书签/改变你已经
6. 在这个网页上，打开书签您创造... ...它会执行代码

你应该会看到一个黑条上写着“我在页面底部以白色添加了“使用外部代码”，这仅适用于桌面。手机会有所不同。

注意

• 使用匿名函数这里是在我看来
• 记住一些元素/由JavaScript生成网站上的风格很好的做法。因此，在这种情况下，即使您分配课程，它也可能不会总是看起来一样或者做任何事情。
• 您将看到具有“检查元素”的元素，但“查看源代码”不会，因为这会请求免费的网页副本，并且不会更改并显示源代码。
• 如果您使用的脚本大于上述脚本，则最好通过将脚本标签附加到文件来执行。

获取棘手的代码/服务器端 - 我将立足这个在使用PHP服务器端..

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

你会做一些东西，比如将bookmarklet作为一个javascript文件，并使用追加脚本标记方法来调用你的脚本。

这将始终保持轻量级，并且可以通过使用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和添加背景颜色..使用绝对位置，因为这会将其移动到左上方......而不是页面的底部。

而且改名变量为具有可变JS名为画布是一个坏主意，在我的岗位

Answer 2

是，使用如下代码：

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