Javascript（远程包括）：即时创建HTML元素？

Question

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

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

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

我们可以在我们的网站上生成Button。我们唯一需要做的就是在我们的页面中嵌入他们的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时，浏览器会说：

  

无法执行＆＃39;写＆＃39; on＆＃39; Document＆＃39;：除非明确打开，否则无法从异步加载的外部脚本写入文档。

所以请让我知道：

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

全部谢谢：）

Answer 1

恕我直言，更好的方法是从你的externa 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);
});