CODEWITHSUNDEEP
javascripthtmlasp.net
Micah Armantrout
Micah Armantrout

Reputation: 6971

Passing Variables to a new page without query string

Is there a way to pass a variable from 1 page that has a popup iframe on it to the popup (iframe) on client side button click without using query strings? my variable is too big to use a query string?

Another way to ask the same question

Is there a way to pass a variable from 1 page to another page on client side button click without using query strings? my variable is too big to use a query string?

This is for use on IE 8 and higher html 5 storage will not work

Upvotes: 8

Views: 9570

Answers (4)

Brian
Brian

Reputation: 727

Try the following:

Main Page

<html>
    <head>
        <title>JS Iframe Test</title>
    </head>
    <body>      
        <iframe id="frame" src="js-test-iframe.htm"></iframe>
        <br /><br />
        <input type="text" id="toInject" /> <button id="send">Send To Iframe</button>        

        <script type="text/javascript"> 
            document.getElementById('frame').onload =  function(){  
                document.getElementById('frame').contentWindow.doSomething("Hi");                    
            }

            var btn = document.getElementById('send');

            btn.addEventListener("click", function(){
                var text = document.getElementById('toInject').value;
            
                document.getElementById('frame').contentWindow.doSomething(text);
                // window.frames[0].doSomething(text); // An alternative

            }, false);                  
        </script>
    </body>
</html>

IFrame Page (js-test-iframe.htm)

<html>
    <head>  
        <script type="text/javascript">
            function doSomething(text)
            {
                document.getElementById('valueHere').innerHTML = text;              
            }
        </script>
    </head>
    <body>
        <div id="valueHere">Default Text</div>
    </body>
</html>



Do keep in mind that you need to wait for the iframe to load before you manipulate or pass any variables to it. Also note that this only works if you are sourcing a page within the same domain.

Upvotes: 1

Jeremy Breece
Jeremy Breece

Reputation: 262

Not the cleanest approach, but you can also do something similar to what Nabil suggested by having the child iframe call a javascript function via window.parent

var myValueFromParent = window.parent.SomeFunctionOnParentFrame();

I have used this method not to pass a value from parent to child but rather have child signal parent.

Upvotes: 1

Nabil Kadimi
Nabil Kadimi

Reputation: 10394

You can call a function that exists on the child window from the parent and pass data from parent to child.

I apologize for this very basic example, where we pass whatever is in the variable dummy_txt from the parent window to the child window.

Parent (parent.htm)

<html>
<body>
    <input id="btn" type='button' value='Open Window' />
    <script>

        var child_win;

        document.getElementById("btn").onclick = function () {
            child_win = window.open("child.htm");
            dummy_txt = 'blah blah blah blah blah...'
            setTimeout(function () { 
                child_win.document.write(dummy_txt); 
                // Hey, you can do child_win.my_own_function(dummy_txt)
            }, 2000);
        }

    </script>
</body>
</html>

Child (child.htm)

<html><body></body></html>

Upvotes: 1

Bryce
Bryce

Reputation: 6610

If your two pages are on the same domain, you can use HTML5 LocalStorage. It's a JavaScript object that can hold strings up to around 5MB or so.

If you need to store other data than strings, you can use JSON.stringify() and JSON.parse() to convert between your datatypes and strings.

Without HTML5

You have the option to use cookies and get/set them with JavaScript, otherwise there are many LocalStorage polyfills to choose from which should be able to work in restricted environments.

Upvotes: 4

Related Questions