JavaScript inside PHP not working (document.getElementById)

Question

Something weird is happening but I can't seem to get the JavaScript code document.getElementById working inside of PHP...

For example, load the following PHP code (below) into a PHP file and run it, there is no JavaScript alert? But if you copy the source-code that the PHP echoed (or printed) and run it as an HTML file there is a JavaScript alert? So any element that is created inside of PHP tags doesn't run in JavaScript, even if the JavaScript is kept outside of the PHP tags?

Here is the PHP demo code:

<?php 
print "
<iframe id='my_id' name='my_id' src='http://www.php.com/'></iframe>

<SCRIPT LANGUAGE='javascript'> 
document.getElementById('my_id').contentWindow.onload = function(){
    alert('content loaded');
}
</SCRIPT>
";
?>

It even doesn't work if just this is your code:

<iframe id='my_id' name='my_id' src='<?php echo"http://www.php.com/"; ?>'></iframe>

<SCRIPT LANGUAGE='javascript'> 
document.getElementById('my_id').contentWindow.onload = function(){
    alert('content loaded');
}
</SCRIPT>

Here is the source code that appears (upon request) (Also the contentWindow.onLoad is working fine for content that is not on the same domain as mine in Safari):

<iframe id='my_id' name='my_id' src='http://www.php.com/'></iframe>

<SCRIPT LANGUAGE='javascript'> 
document.getElementById('my_id').contentWindow.onload = function(){
    alert('content loaded');
}
</SCRIPT>

My issue is that in HTML this code works fine and the alert is called.... in PHP the code does not work and the alert is never called... There is something wrong with the way PHP handles document.getElementById, there is nothing wrong with .contentWindow.onload.

_"So any element that is created inside of PHP tags doesn't run in javascript, even if the javascript is kept outside of the php tags?"_ - The browser doesn't know or care which part of the response was dynamically generated within the ` — nnnnnn, Nov 07 '12 at 03:12

Ruben-J · Accepted Answer · 2012-11-09T06:18:21.350

11

<iframe id='my_id' onload="alert('Content Loaded');" name='my_id' src='http://www.php.com/'></iframe>

Or better

<iframe id='my_id' onload='ShowAlert();' name='my_id' src='http://www.php.com/'></iframe>   

<script type='text/javascript'>
function ShowAlert(){
    alert('Content Loaded');
}
</script>

Or if you want to echo it

<?php
echo "<iframe id='my_id' onload='ShowAlert();' name='my_id' src='http://www.php.com/'></iframe>   

<script type='text/javascript'>
function ShowAlert(){
    alert('Content Loaded');
}
</script>"; ?>

edited Nov 09 '12 at 06:18

answered Nov 09 '12 at 06:11

Ruben-J

2,663
15
33

Very nice, I don't know why yours worked and mine didn't I can't see whats wrong.... but yours worked none-the-less! Thankyou! – Albert Renshaw Nov 09 '12 at 08:29
The Onload eventhandler is probably attached to late to the iframe. Defining it on the element is the only difference. Up vote would be nice though..;) – Ruben-J Nov 09 '12 at 09:17
3

Javascript usually fails to call event handler functions if those functions are *not* defined *before* the event is defined. In that case, the onload is failing since it may not detect the function definition at the time it was defining the handler – StormByte Nov 13 '12 at 14:07
This works because the function is called on the iframe onload event, which can be accessed by the parent window. The alert will be executed when the iframe is loaded, not when the content inside is loaded. – janenz00 Nov 15 '12 at 19:31

score 3 · Answer 2 · answered Nov 09 '12 at 07:07

3

<iframe id='id' onload='display();' name='my_id' src='www.test.com'></iframe>   

<script type='text/javascript'>
function display(){
    alert('Loading');
}
</script>

answered Nov 09 '12 at 07:07

Manish

191
10

score 1 · Answer 3 · answered Nov 09 '12 at 12:36

1

It fails because you call document.getElementById before the document is loaded, if you want to attached the frames onload handler like this you need to put the call to document.getElementById within the body onload.

Something like:

<script>
    function loaded() {
        document.getElementById('my_id').contentWindow.onload = function(){
            alert('content loaded');
        }
    }
</script>
<body onload="loaded()">
<iframe id='my_id' name='my_id' src='http://www.php.com/'></iframe>
</body>

Even better grap a framwork like jQuery and use the domready event. Its pretty standard to wrap all javascript code in a domready handler.

There is the alternative mentioned by others that you directly attach the frames onload handler by putting it in the html.

PHP isn't having any effect here.

answered Nov 09 '12 at 12:36

mcfedr

7,845
3
31
27

I strongly disagree with that. You should not bloat all your page with a framework only for 1 or maybe 2 functions you may need. – StormByte Nov 13 '12 at 14:11
Clearly if you are not using the rest of the framework then maybe something like domready (https://github.com/ded/domready) is the way to go. But if you are writing any amount of js, a framework is a very good idea. – mcfedr Nov 15 '12 at 12:48
jquery is not a framework. binding to onload is not a good idea. Proper DOMready handling implementation is only about 10 lines of code. The proposed domready code seems ok too. – naugtur Nov 15 '12 at 21:39

score 1 · Answer 4 · answered Nov 15 '12 at 20:56

Attach the function to the onLoad of the DOM itself and not to the contentWindow of the DOM element.

<iframe id='my_id' name='my_id' src='http://www.php.com/'></iframe>

<script> 
    document.getElementById('my_id').onload = function(){
     alert('content loaded');
    }
</script>

Hence in PHP

<?php
echo <<< xyz
<iframe id='my_id' name='my_id' src='http://www.php.com/'></iframe>

    <script> 
        document.getElementById('my_id').onload = function(){
         alert('content loaded');
        }
    </script>
xyz;

?>

Which works for me.

score 0 · Answer 5 · answered Nov 07 '12 at 02:47

0

try this

<?php

echo "<iframe id='my_id' name='my_id' src='http://www.php.com/'></iframe>

<script type='text/javascript'>
document.getElementById('my_id').onload = function(){     
  alert('content loaded'); 
}
</script>";

?>

answered Nov 07 '12 at 02:47

Kotzilla

1,333
18
27

That has no PHP code? I can't get it to work with PHP, it works with HTML like you suggested above. – Albert Renshaw Nov 07 '12 at 02:48
That's the code I posted above that wasn't working? (except your parentheses around script type should be apostrophes for the code to even sort of work) – Albert Renshaw Nov 07 '12 at 02:51
your code not working buddy, http://jsfiddle.net/eQzLx/ so you put this html in php tag – Kotzilla Nov 07 '12 at 03:00

score 0 · Answer 6 · edited May 23 '17 at 11:59

0

Your issue is not related to the php part of the code. Your code works fine when I try to load a file from the same domain, as shown below:

   <?php
       print "<iframe id='my_id' name='my_id' src='test.php'></iframe>

       <SCRIPT LANGUAGE='javascript'> 

         document.getElementById('my_id').contentWindow.onload = function(){
             alert('content loaded');
         }
       </SCRIPT>
      ";
  ?>

The issue here is the ownership of the iframe.contentWindow when doing a cross domain request. This is one of the first links that shows up in Google when you search for iframe cross domains. See this portion:

The window object representing the iframe content is the property of the page that was loaded into the iframe. In order for the containing page to access the iframe’s window object in any meaningful way, the domain of the containing page and the iframe page need to be the same (details).

That means, you can access the contentWindow only when you load content from the same domain.

Check the answer to this SO question too.

edited May 23 '17 at 11:59

Community

1
1

answered Nov 07 '12 at 04:33

janenz00

3,315
5
28
37

But the code works fine when it's not in PHP, the code doesn't work when it is in PHP... If you run this code through HTML the alert goes through when the content is loaded, I've tested and verified this (with content from different servers) you can test it too! – Albert Renshaw Nov 07 '12 at 06:14
The problem is in the PHP because when I run the PHP code I never receive the javascript alert but then if I copy and paste the source code that is echoed from the PHP file into an HTML document and then run it again all of a sudden the javascript alert is called! :o It's fascinating, I have no clue why this is occurring haha! – Albert Renshaw Nov 07 '12 at 06:22
I tested. I did not get the alert (neither from PHP nor from the HTML output) when the domain was external. Its weird – janenz00 Nov 07 '12 at 06:27
Huh, crazy! I get the alert on HTML, are you using Safari? Also, did you use the source-code for the HTML file or did you just modify the PHP code? – Albert Renshaw Nov 07 '12 at 14:27

score 0 · Answer 7 · answered Nov 15 '12 at 19:04

0

Ruben-J is right, use the onload within the html iframe, it is easier and as far as i know cannot be done with php, embeded javascript or not

answered Nov 15 '12 at 19:04

SuperKael

226
2
11

score -1 · Answer 8 · answered Nov 07 '12 at 02:50

-1

Are you sure it works in an HTML file? have you tested it?

document.getElementById('my_id').onload = function(){ alert('content loaded'); }

try that

answered Nov 07 '12 at 02:50

xelber

4,197
3
25
33

It works in an HTML file, I checked it ... and the code you posted is just "onload" not "contentWindow.onload" which means it will just run when the iFrame itself is loaded, not the content inside the iFrame (not that it matters for the example I'm posting but for my overall code that part is important haha) – Albert Renshaw Nov 07 '12 at 02:53
I don't think this works in pure HTML either, as the problem should be with same origin policy as the request is cross domain. try document.getElementById('my_id').contentDocument in your console and you should see the error. – xelber Nov 07 '12 at 03:02

JavaScript inside PHP not working (document.getElementById)

8 Answers8