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='/'></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"/"; ?>'></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='/'></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.

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.

• php
• javascript
• iframe
• document
• getelementbyid

• "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 <?php tags and which part was static. "But if you copy the source-code that the php echoed" - Could you show us exactly what was echoed as seen from the browser's View Page Source option? – nnnnnn Commented Nov 7, 2012 at 3:12

8 Answers 8

<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>"; ?>

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

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

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.

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.

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>";

?>

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.

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

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

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

try that