Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Writing a JavaScript file from another JavaScript

I have two web pages. On the first page I have to submit a form. Using the values from the form (using embedded JavaScript code), I need to generate another JavaScript file and use this generated JavaScript file in the next page. How can this be done? Or is there a better way of doing this?

like image 644
Ankur Ankan Avatar asked Dec 15 '22 08:12

Ankur Ankan


2 Answers

Same origin?

Documents of the same origin is always allowed to interact with each other. If code in one window or frame can refer to another window or frame, and they are of the same origin, then JavaScript in one execution context (window or frame..!) can interact with the other. You get such a reference to a foreign Window object as a return value when you invoke window.open()! Thus use that reference to set whatever variables you want on that Window or load new scripts as you please.

Cross document messaging

If the documents are not of the same origin, or you have not a reference to the other execution context, then you must use a new API introduced in HTML5. It is called the "postMessage API" and are surprisingly well supported. Even IE 8 supports it!

Here is a simple way you can check for browser support of this feature:

if (typeof window.postMessage !== undefined)
    console.log("postMessage API is supported!");

Here is an example of how to send a hello world text to a dummy recipient:

window.postMessage("Hello world", "www.dummy.com");

And here is how you would listen for such messages in another JavaScript hosted somewhere else:

window.addEventListener("message", function(event) {
    if (event.origin === "www.dummy.com")
        console.log("Received message: " + event.data);
    }, true);

IE11 may have some issues with this and is not supported in previous versions at all.

Dynamically load a JavaScript

Whenever you have succeeded in establishing a communication channel between the two, and passing simple data won't suffice, then you can always pass a full blown JavaScript to the other party and have him execute that script. Please see this stackoverflow question and his related answers to learn more how you would implement such a solution on the receiving end.

Of course these has just been a few short examples, you should google the rest. Hope it helped you pick up a path at least.

like image 55
Martin Andersson Avatar answered Jan 01 '23 22:01

Martin Andersson


You can do what you're looking for by using Blobs. In order to actually run JavaScript on another page though, you'll need the HTML for that page too.

A not so clean example that works...

var script = function callme(){alert('hi!');};
var html = '<!DOCTYPE html><html><head><script type="text/javascript">'+script.toString()+'</script><body><a onclick="callme();return false;" href="javascript:void(0);">Click me!</a></body></html>';
window.open(URL.createObjectURL(new Blob([html],{type:'text\/html'})));

It only works in the more recent browsers though, such as Chrome 20+, Firefox 13+, IE 10+, and in Safari 6+. More info about Blobs here: https://developer.mozilla.org/en-US/docs/Web/API/Blob

like image 38
Pluto Avatar answered Jan 01 '23 23:01

Pluto