Javascript（远程包含）：即时创建 HTML 元素？ [复制]

Question

我正在尝试制作一个浮动 HTML 按钮，以及其上的交互（例如：点击时弹出一个表单），让人们在他们的页面中嵌入一些 Javascript。

就像是，我的 HTML 元素应该在他们的页面顶部（在不同的域）远程生成。

例如，我见过类似 Uservoice 反馈按钮和表单，它看起来像：

我们可以在我们的网站上生成该按钮。我们唯一需要做的就是将他们的 Javascript 嵌入到我们的页面中：

<!-- USERVOICE -->
<script type="text/rocketscript">
  var uvOptions = {};
  (function() {
    var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
    uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/xxxxxxxxxxxxxxxxxxxxx.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
  })();
</script>

---

我试过了

然后为了实现类似的事情，我尝试了自己的 2 个域。在我的 www.domain-a.com 网页上，我嵌入了：

<script type="text/javascript">
 (function() { 
 var myButtonJS = document.createElement('script'); myButtonJS.type = 'text/javascript'; myButtonJS.setAttribute('defer', 'defer');
  myButtonJS.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.domain-b.com/myButton.js?3';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(myButtonJS, s);
 })();
</script>

在 www.domain-b.com 上，myButton.js:

document.write('<div style="z-index:99999999;padding:5px 10px 2px 10px;border:1px solid #000000;position: fixed;bottom: 10px;right: 10px;_position:absolute;_top: expression(offsetParent.scrollTop+document.documentElement.offsetHeight-60);direction:ltr;background:#7fff00;">Click me!</div>');

但是当我运行http://www.domain-a.com时，浏览器会说：

在“文档”上执行“写入”失败：除非显式打开，否则无法从异步加载的外部脚本写入文档。

所以请告诉我：

• 实现这些目标的标准（正确）方法是什么？
• （换句话说）我如何在远程站点上正确生成 HTML 元素，当它们包含我提供给他们的 Javascript 时？

谢谢大家:)

Answer 1

恕我直言，更好的方法是从您的外部 js 动态创建元素，然后将脚本加载到 html 的正文中，这样您就可以确定文档已加载，然后只需挂钩正文文件例如：

document.getElementsByTagName('body')[0]

在您的外部脚本中。然后在此处附加您的元素。 :)

Answer 2

您可以创建一个 DOM 元素，使用 innerHTML 设置其内容，然后在内容准备好时附加到 DOM：

var myElement = document.createElement('div');
myElement.innerHTML = '<div style="z-index:99999999;padding:5px 10px 2px 10px;border:1px solid #000000;position: fixed;bottom: 10px;right: 10px;_position:absolute;_top: expression(offsetParent.scrollTop+document.documentElement.offsetHeight-60);direction:ltr;background:#7fff00;">Click me!</div>';
document.addEventListener("DOMContentLoaded", function() {
    document.body.appendChild(myElement);
});