differences between onload() uses in javascript

Question

I would like to know if there is a difference between those 2 differents way of using onload() function ? (time delay, order of execution etc.) or is it exactly the same ?

Thanks

1st way :

<iframe onload="frameload()" src="script.php" name="myFrame" id="myFrame"></iframe>

<script>



function frameload(){


            var iframe = document.getElementById('myFrame'); 

            var innerDoc = iframe.contentWindow.document;

            document.write(innerDoc.getElementById('ele1').value);

        }

</script>

2nd way:

<iframe src="script.php" name="myFrame" id="myFrame"></iframe>

<script>

document.getElementById('myFrame').onload=function() {

            var iframe = document.getElementById('myFrame'); 

            var innerDoc = iframe.contentWindow.document;

            document.write(innerDoc.getElementById('ele1').value);


}

</script>

First approach will throw an error if javascript is disabled, that's the only difference. However, the second one is better practice. Scripts shouldn't be pushed into the markup, that leads to a lot of confusion because your presentation actually does something by itself and you don't see it quickly. — Frederik.L
– Frederik.L, Commented Mar 1, 2016 at 9:08
"First approach will throw an error if javascript is disabled" — What error? — Quentin
– Quentin, Commented Mar 1, 2016 at 9:12
@Quentin No error, you are right, thanks for that. I never used inline javascript in production code but was convinced it would at least display an error message because the code isn't allowed to run but is part of the markup. Sure enough I think this is weird behaviour to force disabled code into presentation. — Frederik.L
– Frederik.L, Commented Mar 1, 2016 at 9:43

Lorenzo Marcon · Accepted Answer · 2016-03-01 09:11:36Z

2

In this particular example the effect is the same. Anyway, if you'd need to use this inside your function, in the first case this refers to the Window object, while in the second one it refers to the iframe DOM node.

Additionally, as other pointed out, inline JS code is bad for several reasons. In a nutshell, it's preferable to separate the JS from HTML to improve readability and caching (e.g. if the code is in a separate file).

answered Mar 1, 2016 at 9:11

Lorenzo Marcon

8,2395 gold badges40 silver badges64 bronze badges

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

2 Comments

mric750 Over a year ago

In the case "script.php" would be in a other domain, without considering Same Origin Policy, would both my solutions still works ? i tried both those solutions on a CSRF challenge (root-me.org), only the 2nd solution worked...

Lorenzo Marcon Over a year ago

actually they should both work, but as we said I see no advantages in using the first solution instead of the second one..

Anton · Accepted Answer · 2016-03-01 09:03:24Z

0

I guess there is no significant performance difference, however the 2nd approach helps you separate the concerns - markup (HTML) and functionality (JS).

answered Mar 1, 2016 at 9:03

Anton

2,6862 gold badges22 silver badges36 bronze badges

Comments

nick · Accepted Answer · 2016-03-01 09:03:45Z

0

Those 2 should be identical.

It's nicer to add it via

.addEventListener("load", yourFunction);

If that's not possible in your case your code should work fine.

answered Mar 1, 2016 at 9:03

nick

717 bronze badges

Comments

johannesMatevosyan · Accepted Answer · 2016-03-01 09:19:07Z

0

I agree with @Lorenzo's answer and I would like to add that the second approach is a bit faster. Here are the results from firefox, please check the links I used a random link as a source for iframe:

First approach: http://screencast.com/t/esXo0jC4Qcx

Second approach: http://screencast.com/t/BlLmXcPtuZW

answered Mar 1, 2016 at 9:19

johannesMatevosyan

2,3082 gold badges39 silver badges44 bronze badges

Comments

Jishnu KM · Accepted Answer · 2016-03-01 09:17:49Z

-1

ofcorz both are same.

standard coding style is the second one. But some times we have to follow the first approach.

eg. if we have a textBox with same id "txtStudentName" in Create and Edit pages and have to autocomplete it only on create page. In such condition you can use first approach to autocomplete. Othewise the code will affect both textboxes by using a single js

answered Mar 1, 2016 at 9:17

Jishnu KM

2441 silver badge8 bronze badges

3 Comments

Anton Over a year ago

You cannot use two elements with the same id in one HTML page. It is prohibited. id has to be unique.

Jishnu KM Over a year ago

@Anton i have mentioned it above that there are two different pages Create and Edit and Using same .js file in both pages :(

Anton Over a year ago

ok, I see. Still it is not an excuse for using onload="frameload()". In the case you described another approach should be taken to ensure that the same JS file will not collide if it is used accross multiple pages. JS files are often bundled to a single cached file used across the whole domain. So if you use the same id on different pages (which is valid), make sure you do not use document.getElementById for that id.Use another way to select the proper HTML element - e.g. place HTML page of edit page inside <div class="edit"> and create page inside <div class="create">.

Collectives™ on Stack Overflow

differences between onload() uses in javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related