Set Script Source from the same file instead of a different one?

Question

I create an iframe in a file and insert a <script> tag as its content. The Script src is loaded from a different file called test.js. Here is how it is done:

var scriptElement = document.querySelector("#your-widget");
var iframe = document.createElement("iframe");
scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);

var script = document.createElement("script"); 
iframe.contentWindow.document.appendChild(script); 
script.src = "http://www.example.com/test.js";

Instead of loading the content of the script from http://www.example.com/test.js I want to take it from the same file where the above code is. This would like this:

var scriptElement = document.querySelector("#your-widget");
var iframe = document.createElement("iframe");
scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);

var script = document.createElement("script"); 
iframe.contentWindow.document.appendChild(script); 
script.src = // ????

// the following JavaScript code should be placed inside the script
function mywidget() {
  // some code
  return true;
}
mywidget.succeeded = mywidget();

How can I set the Script Source from the same file instead of a different one?

Possible duplicate of [How might I get the script filename from within that script?](http://stackoverflow.com/questions/710957/how-might-i-get-the-script-filename-from-within-that-script) — Mike Cluck, Jan 12 '16 at 19:08
How so? You wish to get the source of the currently executing script so you can use that same source for the script you're placing in the iframe, right? — Mike Cluck, Jan 12 '16 at 19:16
Yes, I want everything after ``the following JavaScript code should be placed inside the script`` inside the script tag. You can wrap the content in a function such that it is not directly executed in the file. — Michael, Jan 12 '16 at 20:01
Ah, that part wasn't clear. I know you [can't just take snippets of the currently executed script](http://stackoverflow.com/questions/34751758/javascript-function-object-body/34751824#34751824) and place them in another script so you might be better off placing that snippet in a separate file then loading the contents of, say, `test.js` and that snippet then appending those contents to the `innerText` of a script tag before adding it to the iframe. — Mike Cluck, Jan 12 '16 at 20:06

score 0 · Answer 1 · answered Jan 13 '16 at 01:10

If you literally just want to place that exact snippet in a script tag, you can just do so using .innerText.

script.innerText = 'function mywidget() { ...';

Then it will execute as is when it's inserted into the DOM. If you want to dynamically find and inject that code, read on.

There are exactly two ways to load a script on a page.

Add a <script> with the src attribute pointing to a file.

Create a <script> tag then set the contents to whatever you want to execute.

var script = document.createElement('script');
script.innerText = 'console.log("Hello, World!")';
document.body.appendChild(script);

If you want to extract part of a script and use those contents then the best you can do is load the contents via ajax and inject it using method 2.

Assuming you have jQuery (for easy AJAX work):

$.ajax({
  url: 'path/to/script.js',
  dataType: 'text', // make sure it doesn't get eval'd
  success: function(contentsOfScript) {
    // Refer to method 2
  }
});

Now you can go about extracting the contents of that snippet in one of two ways:

Know exactly which line it begins on.

var lines = contentsOfScript.split('\n');
var snippet = lines.slice(lineNumber + 1); // adjust for 0 indexing

Generate a regular expression to identify where your code begins. This is rather tricky and very error prone if your snippet isn't easily distinguished from other code.
```
var snippet = contentsOfScript.match(/function mywidget.+/)[0];
```

Neither of these methods will work if you perform any minification on your code.

I want to copy the js code after ``the following JavaScript code should be placed inside the script`` into the script. The code should not be executed in the main file but only in the script where it was copied in. How do I do that? Could you please change your answer for that? — Michael, Jan 13 '16 at 01:45
@confile My answer does exactly that. Using any one of these methods, you can place the code you want inside of the iframe script. — Mike Cluck, Jan 13 '16 at 02:09

Set Script Source from the same file instead of a different one?

1 Answers1