Javascript (Remote include) : HTML Elements creation on-the-fly?

Question

I'm trying to make a floating HTML button, along with the interaction on it (like: Popping up a form when clicked) by letting the people just EMBED some Javascript inside their Page.

So it's like, my HTML Elements should be generated on top of their page (at different domain) remotely.

For example, i have seen something like Uservoice Feedback Button and Form, it looks like:

We can have that Button generated on our site. The only thing we need to do is to embed their Javascript in our page:

<!-- 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>

I tried this

Then in order to achieve similar thing, i tried with my own 2 domains. On my Webpage at www.domain-a.com, i embed:

<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>

On the www.domain-b.com, inside the 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>');

But when i run, http://www.domain-a.com, the browser says:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

So please kindly let me know:

What are the standard (proper) ways to achieve such ones?
(In other words) how do i properly generate the HTML elements on top of remote sites, when they include the Javascript i provided to them?

Thanks all :)

score 1 · Accepted Answer · answered Sep 23 '16 at 08:10

1

IMHO, the better way to do it is create the element on the fly from your externa js then load the script in the body of the html, that way you are sure that the document is loaded and then just hook in the body of document e.g:

document.getElementsByTagName('body')[0]

in your external script. then append your element there. :)

answered Sep 23 '16 at 08:10

Marcus Jason

250
4
11

But then how do i bring another popup Form (bigger div box) ... upon clicking on this current generated DIV please? – 夏期劇場 Sep 23 '16 at 08:48
1

add a click event handler for that, use button or a link, then add $('#id').on('click') handler. – Marcus Jason Sep 23 '16 at 08:52

score 1 · Answer 2 · answered Sep 23 '16 at 08:16

1

You can create A DOM element, use innerHTML to set its contents ant then attach to the DOM when the content is ready:

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);
});

answered Sep 23 '16 at 08:16

Vicente Gallur Valero

311
2
10

But then how do i bring another popup Form (bigger div box) ... upon clicking on this current generated DIV please? – 夏期劇場 Sep 23 '16 at 08:47
1

You can use a similar approach. `myElement.addEventListener("click", function(){ //Create the form and attach to the dom like before })` – Vicente Gallur Valero Sep 23 '16 at 08:52

Javascript (Remote include) : HTML Elements creation on-the-fly?

I tried this

2 Answers2