javascript - I can call parent function in iframe, but cannot change parent variable -

-

i have inside.html is:

<!doctype html> <html lang="en">     <head>         <meta charset="utf-8"/>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>     </head>       <body>         <button id="mybutton">click</button>     </body>     <script>         $(document).ready(function() {             parent.changename("init");         });          $("#mybutton").click(function(e) {             parent.changename("changed");         })     </script> </html>

it loaded iframe outside.html:

<!doctype html> <html lang="en">     <head>         <meta charset="utf-8"/>     </head>       <body>         <iframe src="inside.html" style="overflow: scroll; position: absolute; width: 100%; height: 100%; border: none;">         </iframe>     </body>     <script>         var name = "";         function changename(arg) {             name = arg;             alert(arg);         }     </script> </html>

now, when load page or click button of inside.html, changename function in outside.html called, alertbox shown. however, variable name not changed (i cheched console). don't know why.

both file in same domain, there no cross-domain problem.

you can view live page if don't mind:

outside.html on server

thank you!


Comments

Post a Comment