-1

I have an existing header and footer navigation that I would like to apply to third-party applications and sites on various platforms.

Ideally I would like to instruct vendors to add one script tag in HEAD of the document that then uses javascript to do the following:

  1. Add stylesheets to document head
  2. Add script tags before the closing body tag (jquery and other libraries and a app.js)
  3. The app.js will then rely on jQuery to load navigation html after the opening body tag and other dom manipulation (adding classes, removing elements, etc.)

I after reviewing this discussion - is document write the best solution in the initial script tag given to a third party?

Thank you.

Community
  • 1
  • 1
JacobLett
  • 427
  • 5
  • 18
  • This question is either too broad, **opinion based** or invites discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Nov 25 '15 at 16:09
  • I know it is opinion based but isn't that the nature of code? Many different ways to accomplish the same goal. This question looks opinion based as well http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice?lq=1 – JacobLett Nov 25 '15 at 16:19
  • I agree with Paulie_D, but here's my two pennies... document.write is preferred way for lazy if you don't care what mess can cause and if you have to make it to "work" on 100k+ websites. jQuery can be special kind of mess since you have to add jquery library (heavy) and if it's loaded on site with some other version of it (most likely) it's possible you'll end up with conflict and even more mess. In my experience, document.write with jQuery is the worst approach. If it's posible, pure JS inside a div. If not, document.write inside iframe. – Bozidar Sikanjic Nov 25 '15 at 16:22
  • @JacobLett Did you see the age of the original question? Opinion based questions were sort of permitted *six years ago*. The site guidelines/rules have changed **a lot** since then. – Paulie_D Nov 25 '15 at 16:30

2 Answers2

1

You don't need to document.write(); in order to inject code into the head. If they embed your remote JavaScript file into their page, anywhere, you should be able to just append a script/style elements to the head.

 var myScript = document.createElement('script');
 myScript.setAttribute('src', '...');
 myScript.setAttribute('type', 'text/javascript');
 document.getElementsByTagName('head')[0].appendChild( myScript );

If you look at the Google Analytics embed code, you'll see some similarities. It's short enough that you should be able to figure out what is going on:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', '...', 'auto');
  ga('send', 'pageview');

</script>
Jeff Jenkins
  • 15,356
  • 6
  • 46
  • 86
  • Thank you! `// Is jQuery here? If not load it if (!window.jQuery) { var jq = document.createElement('script'); jq.type = 'text/javascript'; // Path to jquery.js file, eg. Google hosted version jq.src = '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'; document.getElementsByTagName('head')[0].appendChild(jq); } // JS - Load plugins var myScript1 = document.createElement('script'); myScript1.setAttribute('src', 'includes/plugins.js'); myScript1.setAttribute('type', 'text/javascript'); document.getElementsByTagName('body')[0].appendChild( myScript1 );` – JacobLett Nov 25 '15 at 17:13
  • 1
    Note that the `src` of myScript1 needs to be a full URL, domain and all, otherwise it won't load on your 3rd party sites since that relative path likely doesn't exist. – Jeff Jenkins Nov 25 '15 at 17:24
  • Ok Thank you. You saved me from looking like a goof. – JacobLett Nov 25 '15 at 17:34
1

I would not use document.write for this because anytime this method is called after the window is loaded, it wipes everything out except for what you just wrote to the document.

Instead, I would use document.createElement() to create the tags, and then use appendChild() to add the js files or elements to the elements and then to the document.

var script1 = document.createElement("script");
var script1File = document.createTextNode(myfilepath.js);
script1.appendChild(script1File);
document.body.appendChild(script1);

This should add the script to the bottom of the body. This way, triggers can be set in the JS files without wiping the document clean every time one is called. Rinse, wash and repeat for other elements.

Randy D
  • 203
  • 2
  • 9