Insert JS / JavaScript code into iframe from parent

Question

I have a script which I loaded into my parent HTML head from my server... I want to insert that script into my iframe whenever it reloads.

I have a function that makes my iframe reload before it insert scripts into head like this:-

function insertScriptIntoHead(){
    var head = iframe.contentWindow.document.getElementsByTagName('head')[0];
    var script = iframe.contentWindow.document.createElement('script');
    script.src = getFromParent();
    script.type = 'text/javascript';
    head.appendChild(script);
}

This file is of 1.5 mb and upon every reload it is loaded again which I want to eliminate.

I thought if I can load it from parent and put the file on every reload into the iframe then probably I will eliminate the file getting loaded from the server which will save time.

Any help will be appreciated

-Thanks

do you have a question? or a problem? some error message perhaps? as it stands you've stated what you've done, but no indication of any problems — Jaromanda X
– Jaromanda X, Commented Aug 9, 2017 at 9:54
read carefully..... how to create that getFromParent() function..... — sidd
– sidd, Commented Aug 9, 2017 at 17:09
Really? I didn't get that at all, I thought that was a funciton you'd already written — Jaromanda X
– Jaromanda X, Commented Aug 9, 2017 at 21:16

asmmahmud · Accepted Answer · 2018-10-23 11:37:46Z

10

JavaScript script file won't start loading until you append it to the html page. You can load the script in the parent and get the code content and put it inside iframe instead of directly being inserted the script tag with src into iframe.

In parent you can load it.

<script src="bigjs.js" id="iframejs"></script>

and now you can read its content and put the content in the iframe script tag everytime that iframe reloads:

function insertScriptIntoHead(){
    var head = iframe.contentWindow.document.getElementsByTagName('head')[0];
    var script = iframe.contentWindow.document.createElement('script');
    script.innerText = document.getElementById('iframejs').innerText;
    script.type = 'text/javascript';
    head.appendChild(script);
}

This way, you can achieve what you want.

edited Oct 23, 2018 at 11:37

answered Aug 9, 2017 at 10:02

asmmahmud

5,0742 gold badges42 silver badges53 bronze badges

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

1 Comment

Flaom Over a year ago

... And OP was never heard from again :\

Collectives™ on Stack Overflow

Insert JS / JavaScript code into iframe from parent

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related