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!

Answer 1

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";
.......

Answer 2

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.

Eg

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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