Insert javascript from an external script into javascript in the HTML

Question

I have some JS from an external JS file that I want to insert inside of a JS function in the HTML file. I can not touch the JS script in the HTML file, so I am wondering if this method can be done.

Here is the JS I want to insert inside of the JS function in the HTML file.

// FIRST JS TO INSERT
if (OS == "mobile"){
        killVideoPlayer();
    }

// SECOND JS TO INSERT
if (OS == "mobile"){ 
        loadHtmlFiveVideo();
        if (!document.all){
            flvPlayerLoaded = false;
        }
    }else {
        loadVideoPlayer();
    }

Then I want to insert it into here.

<script>
function mediaTypeCheck() {
if (bsiCompleteArray[arrayIndex].mediaType == "video") {
// INSERT FIRST JS HERE
    document.getElementById("bsi-video-wrap").style.display = "block";
    document.getElementById('pngBsi').style.display = "block";
    document.getElementById("frame_photo").style.display = "none";
    document.getElementById("relativeFrame").style.display = "block";
    document.getElementById("buy-me-photo-button-bsi").style.display = "none";
// INSTER SECOND JS HERE    
    loadVideoPlayer();
} 
if (bsiCompleteArray[arrayIndex].mediaType == "photo") {
    killVideoPlayer();
    document.getElementById("bsi-video-wrap").style.display = "none";
    document.getElementById('pngBsi').style.display = "block";
    document.getElementById("relativeFrame").style.display = "block";
    document.getElementById("frame_photo").style.display = "block";
    document.getElementById("buy-me-photo-button-bsi").style.display = "block";
    if (!document.all){
        flvPlayerLoaded = false;
    }   
}   
}
</script>

Thank you!

jimbo · Accepted Answer · 2012-10-10 19:18:03Z

1

In JavaScript, you can overwrite variables with new values at any time, including functions.

By the looks of it, you could replace the mediaTypeCheck function with one of your own that does what you need and then calls the original function.

E.g.

(function(){
  // keep track of the original mediaTypeCheck 
  var old_function = mediaTypeCheck;
  // overwrite mediaTypeCheck with your wrapper function
  mediaTypeCheck = function() {
    if ( conditions ) {
      // do whatever you need to, then ...
    }
    return old_function();
  };
})();

The above can be loaded from any script, so long as it happens after the mediaTypeCheck function is defined.

edited Oct 10, 2012 at 19:18

answered Oct 10, 2012 at 18:47

jimbo

11.1k6 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Justin Over a year ago

I get an error when using this code. Uncaught SyntaxError: Unexpected token function

Justin Over a year ago

So I improved on it a little bit so that it checks to make sure that function is loaded first. I put your code inside of setInterval(function(){ if (typeof mediaTypeCheck === 'function') { your code here }, 100); and it works perfectly!

jimbo Over a year ago

Make sure you clear that interval once you succeed in setting the mediaTypeCheck! Otherwise you'll just keep creating more and more functions that nest indefinitely.

davehale23 · Accepted Answer · 2012-10-10 18:56:49Z

The easiest way for me in the past has been using server-side includes. Depending on your back end, you can set up a PHP or ASP page or whatever to respond with a mime type that mimics ".js".

I'm not a PHP guy, but you'd do something like this: (if my syntax is incorrect, please someone else fix it)

<?php 
//adding this header will make your browser think that this is a real .js page
header( 'Content-Type: application/javascript' );
?>

//your normal javascript here
<script>
function mediaTypeCheck() {
if (bsiCompleteArray[arrayIndex].mediaType == "video") {

//here is where you would 'include' your first javascript page
<?php 
      require_once(dirname(__FILE__) . "/file.php");
?>

//now continue on with your normal javascript code
document.getElementById("bsi-video-wrap").style.display = "block";
document.getElementById('pngBsi').style.display = "block";
.......

Diodeus - James MacFarlane · Accepted Answer · 2012-10-10 18:37:41Z

0

You cannot insert JS inside JS. What you can do is insert another tag into the DOM and specify the SRC for the external JS file.

answered Oct 10, 2012 at 18:37

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

2 Comments

Christophe Over a year ago

Really? Some libraries like emberjs can manipulate scripts as strings, so I would expect that with this technique inserting a script in another script is possible. I haven't tried though.

Diodeus - James MacFarlane Over a year ago

Sure, it's possible, not not for beginners.

Anoop · Accepted Answer · 2012-10-10 18:37:45Z

0

You can directly insert js file using $.getScript(url);

if you have script as text then you can create script tag.

var script = docuent.createElement('script');
script.innerText = text;
document.getElementsByTagName('head')[0].appendChild(script);

answered Oct 10, 2012 at 18:37

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Comments

Christophe · Accepted Answer · 2012-10-10 18:55:28Z

0

The issue in your case is that you cannot touch the script in the html, so I'll say that it cannot be done on the client side.

If you could at least touch the script tag (not the script itself), then you could add a custom type to manipulate it before it executes, for example:

<script type="WaitForInsert">

answered Oct 10, 2012 at 18:55

Christophe

28.3k29 gold badges104 silver badges145 bronze badges

Comments

Niels Steenbeek · Accepted Answer · 2012-10-10 19:22:13Z

0

Your question looks some strange, but seems to be possible. Try my quick/dirty working code and implement your own situation:

$(document.body).ready(function loadBody(){
var testStr = test.toString();
    var indexAcc = testStr.indexOf("{");
    var part1 = testStr.substr(0, indexAcc + 1);
    var part2 = testStr.substr(indexAcc + 1, testStr.length - indexAcc - 2);
    var split = part2.split(";");
    split.pop();
    split.splice(0,0, "alert('a')");
    split.splice(split.length -1, 0, "alert('d')");
    var newStr = part1 + split.join(";") + ";" + "}";
    $.globalEval(newStr);
    test();
}
function test(){
    alert('b');
    alert('c');
    alert('e');
}

answered Oct 10, 2012 at 19:22

Niels Steenbeek

4,8542 gold badges44 silver badges51 bronze badges

1 Comment

Christophe Over a year ago

The issue is that you're too late, the script has already been executed before you reach document ready and have a chance to tweak it.

Collectives™ on Stack Overflow

Insert javascript from an external script into javascript in the HTML

6 Answers 6

3 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related