how to pass php variable through iframe to javascript

Question

I am trying to pass a php variable value, through an iframe over to a javascript variable. All files are on my own server and domain.

This is my html file:

<html>
<head>
    <?php 
        $userOutput = "bob"; 
    ?>
</head>
<body>
    <p id="test123"><?=$userOutput?></p>
</body>
</html>

And in my original page i try to access the information like this:

<iframe id="iframeId" src="http://path/to/file.html"></iframe>
<script>
   window.onload = function() {
      var iframeDoc = document.getElementById('iframeId').contentWindow.document;
      var test = iframeDoc.getElementById('test123').value;
      console.log(test);
   };
</script>

Now, i do manage to reach my content, and i have tried before to just get the value of some input field i put in my "file.html" with success, but i can't seem to reach the php variable value ("test" shows up as undefined)

After running your code it seems to work fine? In the file where your php variable is, did you save the file as a .php? — Option
– Option, Commented Feb 21, 2017 at 15:40
It is saved as an html file and the php is sort of embedded in it. — RealGigex
– RealGigex, Commented Feb 21, 2017 at 15:44
so where $userOutput is, i saved it as say file.php and then the other file where the JS is I saved it as file2.html and all works fine? Are you able to run phpinfo(); in your .php file. Just to be sure php is setup as it should be. — Option
– Option, Commented Feb 21, 2017 at 15:45
just to make it clearer. I have one html file with php embedded into it (file.html) I have another html file with javascript embedded into it (file2.html) that accesses "file.html" through an iframe element. — RealGigex
– RealGigex, Commented Feb 21, 2017 at 15:50
Well, file.html should be file.php and file2.html can stay as it is. Anything with php in should have the .php extension rather than the .html unless you're running things like AngularJS — Option
– Option, Commented Feb 21, 2017 at 15:51

Option · Accepted Answer · 2017-02-21 15:59:06Z

1

So anything that holds php needs to go into a .php file rather than a .html

as an example:

variableStored.php:

<html>
<head>
    <?php
    $userOutput = "Frrrrrrr";
    ?>
</head>
<body>
    <p id="test123">
        <?php echo $userOutput; ?>
    </p>
</body>
</html>

Take Note: when echo'ing out, its always best to <?php echo 'something';?>

rather than <?='something'?>

Then within lets say iframe.html:

<iframe id="iframeId" src="http://siteurl/variableStored.php"></iframe>
<script>
    window.onload = function() {
        var iframeDoc = document.getElementById('iframeId').contentWindow.document;
        var test = iframeDoc.getElementById('test123').value;
        console.log(test);
    };
</script>

This will then fetch everything from variableStored.php as you want it to.

answered Feb 21, 2017 at 15:59

Option

2,6452 gold badges21 silver badges29 bronze badges

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

2 Comments

RealGigex Over a year ago

Thanks! changed it to <?php echo xxxx ?> as well.

Option Over a year ago

No problem at all!

Community · Accepted Answer · 2017-05-23 12:31:55Z

0

You could echo your variable in a Javascript variable like

<script>var test = "<?= $variable ?>";</script>

And pass the variable as GET parameter to your iframe.

<script>
        var url = "myIframe.html?var1=" + test; 
        $('#myIframe').attr('src', url"); 
</script>

You can then retreive the info using

<script>
function getParamValue(paramName)
{
    var url = window.location.search.substring(1); //get rid of "?" in querystring
    var qArray = url.split('&'); //get key-value pairs
    for (var i = 0; i < qArray.length; i++) 
    {
        var pArr = qArray[i].split('='); //split key and value
        if (pArr[0] == paramName) 
            return pArr[1]; //return value
    }
}
</script>

I want to give credit to @Ozgur bar for his answer here. How to pass parameters through iframe from parent html?

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Feb 21, 2017 at 15:44

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

3 Comments

Nicolas Over a year ago

@Option I didn't actually. Should i ?

Option Over a year ago

I would, it works okay for me so I can only assume it's to do with the Ops PHP on the Ops local machine.

Nicolas Over a year ago

Probably, worst case scenario, i simply suggested a new approach. Thanks for the feedback thought.

Collectives™ on Stack Overflow

how to pass php variable through iframe to javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related