How do I call or execute HTML from within a Javascript function?

Question

Okay here is the full source code of the script I'm playing with:

var isOpera = !!window.opera || navigator.userAgent.indexOf('Opera') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome;                          // Chrome 1+
var isIE = /*@cc_on!@*/false;                            // At least IE6

if (isFirefox) {

    // do FireFox stuff here

} else if (isChrome) {

    // do Chrome stuff here

} else if (isSafari) {

    // do Safari stuff here

} else if (isOpera) {

    // do Opera stuff here

} else if (isIE) {

    // do IE stuff here

} else {

    // other browser

}

Then under each if/else statement, I need to somehow "run":

<script type="text/javascript" src="./include/js/newupdates.js"></script>
    <div id="auto"></div>

Or something similar depending on browser. I looked at Modernizer and it confused the heck out of me. The above example works and successfully detects all the browsers I need it to, I just don't know how to have the script execute certain HTML/JS code INSIDE the if/else statement...

About adding a `.js` file read here: http://stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file - about your html, were do you want it? — Sergio, Sep 14 '13 at 16:22
Your question is horrible ambiguous. You should probably describe what you're really trying to accomplish. Are you trying to dynamically load an external javascript file? Are you trying to programmatically insert DOM elements? Voting to close the question since it hasn't been clarified. — jfriend00, Sep 14 '13 at 16:39
You may find Modernizr confusing, but let me tell you now it would be *far* better than what you're doing here, and far less likely to have unexpected consequences. And Modernizr really isn't that difficult; you just include it on your page, and then use it to test for the features your site uses. I suggest asking a question about that rather than the bad practice you're using here. Either way, unless you're using every bleeding edge feature there is, there's no way you should need all those browser tests. Just do the tests you actually need. — Spudley, Sep 14 '13 at 20:56
@Spudley I appreciate the reply! I'm abandoning the mod this is for as stated below in another comment. It's just getting too complex and is beyond my ability... — zoldos, Sep 14 '13 at 21:25

jfriend00 · Answer 1 · 2013-09-14T20:11:00.043

Now that the actual problem has been clarified, I will submit a completely different answer.

First off, browser detection is generally a poor way to solve browser compatibility issues. It is much better to use feature detection where you detect whether a specific feature is present and working or not. Feature detection is even reliable when the user agent has been spoofed and it's a lot more forward compatible when browser's implement new features than browser agent detection is.

If you are going to stick with your current method, then you can wrap your script (starting after the variable definitions) in a function, include that function in your preloaded javascript and then call the function when desired.

Here's one way to do it:

// include this JS with your other JS or in your <head> section of your HTML document

var isOpera = !!window.opera || navigator.userAgent.indexOf('Opera') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome;                          // Chrome 1+
var isIE = /*@cc_on!@*/false;                            // At least IE6

function doStuffBasedOnBrowserType() {
    if (isFirefox) {

        // do FireFox stuff here

    } else if (isChrome) {

        // do Chrome stuff here

    } else if (isSafari) {

        // do Safari stuff here

    } else if (isOpera) {

        // do Opera stuff here

    } else if (isIE) {

        // do IE stuff here

    } else {

        // other browser

    }
}

Then, in your other code:

<script>
doStuffBasedOnBrowserType(); 
</script>
<div id="auto"></div>

I don't understand you downvoters. This is a ridiculously ambiguous question and I tried to help understand it and provide relevant and accurate information. — jfriend00, Sep 14 '13 at 16:43
Answer changed to a completely different answer now that the OP has changed their question. — jfriend00, Sep 14 '13 at 20:11
@jfriend00 I still don't see how to achieve what I need. I do know that the mod this whole thing is for runs natively in Firefox, but not Chrome or IE, but it does severely spike the server's CPU and it uses a lot of AJAX. I may just give up on this project, and stick with what I know works... — zoldos, Sep 14 '13 at 20:22
@zoldos - if you still have an open question, you'll have to be clear about what that question is. I've answered the question you posted about (after you changed your question) and now your comment talks about server CPU spikes and AJAX which is not mentioned anywhere in your question so I have no idea what you want help with related to that. — jfriend00, Sep 14 '13 at 22:32
@bluetoft - completely new answer to modified question. Might want to reconsider downvote. — jfriend00, Sep 14 '13 at 22:33
I am not further pursuing the project, but I do appreciate your replies! — zoldos, Sep 15 '13 at 01:23

How do I call or execute HTML from within a Javascript function?

1 Answers1