What is the best way to create a JS embed file?

Question

I have blocks of HTML & JS and want to compile it all in to one JS file so I can use a one line embed on external client sites. Like <script src="http://example.com/assets/js/myembed.min.js"></script>

Sample Code

<div class="page-container">
    <div class="container">
        <br />
        <button class="btn launchConfirm">Launch Confirm</button>
    </div>
</div>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Do you want to continue?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
    <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
  </div>
</div>
<script>
$('.launchConfirm').on('click', function (e) {
    $('#confirm')
    .modal({ backdrop: 'static', keyboard: false })
    .one('click', '[data-value]', function (e) {
        if($(this).data('value')) {
            alert('confirmed');
        } else {
            alert('canceled');
        }
    });
});
</script>

Should I wrap it all in document.write or is the a better method to achieve this? And if this is the best way, what is the best way to do this automatically, I.e. Using Grunt/Gulp?

E.g.

document.write("<div class=\"page-container\">");
document.write("        <div class=\"container\">");
document.write("            <br \/>");
document.write("            <button class=\"btn launchConfirm\">Launch Confirm<\/button>");
document.write("        <\/div>");
document.write("<\/div>");

Thanks in advance.

Never use document.write: http://stackoverflow.com/a/802943/1105858 — nils, Sep 15 '15 at 08:36
@DT.DTDG: For your use-case, you would better follow a jQuery plug-in model as you are already using jQuery. Even if you were not using jQuery, this pattern would be helpful. Here is a quick and simple demo I created for you - http://jsfiddle.net/abhitalks/oram5tja/ — Abhitalks, Sep 15 '15 at 09:25

niko · Accepted Answer · 2015-09-15T08:39:09.050

1

Do not use document.write.

var x = '<div> All your html code store in variable </div>';
$("#InsertHere").html(x); // insert where you want

or document.getElementById("InsertHere").innerHTML = x;

// continue your actual code once those elements are ready 
$('.launchConfirm').on('click', function (e) { }

It is quite not possible to embbed html code without using DOM insertion methods which always requires selector. You could create a unique class name and the tag that has that class name will be inserting this code. This is what jQuery does too.

<div class=".innerHTML"></div> // you have to ask them to create such element

edited Sep 15 '15 at 08:39

answered Sep 15 '15 at 08:13

niko

8,737
25
73
128

thank you! Great points you've made. What about if I don't know the ID or class of the container they will be embedding it in? Kind of need them to paste the JS script line anywhere and it will create the containers and elements itself. – DT.DTDG Sep 15 '15 at 08:21
1

unless I just ask them to place this:
– DT.DTDG Sep 15 '15 at 08:36

score 0 · Answer 2 · answered Sep 15 '15 at 08:14

0

Quick and dirty would be to copy the HTML to text-editor of choice, replace newlines and indentation, then add all html as one line. And use single quotes so you dont have to escape the double-quotes

answered Sep 15 '15 at 08:14

BobbyTables

3,498
1
22
28

Thanks :P I love quick but not dirty. Is this really the best way though to insert elements in to the DOM? – DT.DTDG Sep 15 '15 at 08:18

What is the best way to create a JS embed file?

2 Answers2