简体   繁体   中英

How do I obtain a JavaScript object that is created on another php file made by the first page?

My problem is I need to access a JavaScript object which is created on another page(php file) and using it in my current page.

So, this is my first page test_ong.php containing 2 buttons. One is to create another page that produced that JavaScript object and another button to retrieve the JavaScript object.

<button id="new">Open New Win</button>
<button id="dis">Display</button>
<div id="test"></div>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

<script type="text/javascript"> 
var myChild;
$("#new").click(function() {
    myChild = window.open("test_reg.php","","width=500, height=500, resizable=yes");
});

$("#dis").click(function() {
    console.log('I clicked this');
    $.post("test_reg.php", function(data) {
        console.log(data);
    });
});
</script>

And my second page test_reg.php which will create the object whatIWant .

<script type="text/javascript">
    var whatIWant = {
        fruit: "apple",
        car: "Lotus",
        age: 31,
        hobby: "coding"
    };
</script>

So, what I want is whenever I click on button Display. It will give me the object whatIWant in the console log.

I know I can get this by using myChild.whatIWant but I need to refresh my first page and still get the object myChild.whatIWant .

Thank you for those who read or answer my question.

Your second page should return only the object like:

 {
        fruit: "apple",
        car: "Lotus",
        age: 31,
        hobby: "coding"
 }

You can do this by ajax call, you need to first initialize a variable, then through ajax call you can over write it and then display again.

<!DOCTYPE html>
    <html>

      <head>
        <link rel="stylesheet" href="style.css">
        <script>var whatIWant = {};</script>
      </head>

 <body>
    <button id="new">Open New Win</button>
    <button id="dis">Display</button>
    <div id="test"></div>
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>

    <script type="text/javascript"> 
    var myChild;
    $("#new").click(function() {
        myChild = window.open("test_reg.php","","width=500, height=500, resizable=yes");
    });

    $("#dis").click(function() {
        console.log('I clicked this');

        $.ajax({
                type: "POST",
                url: "test_reg.php",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                   alert(data);
                },
                error: function (errormessage) {

                    //do something else

                }
            });
    });
    </script>
      </body>

    </html>

Here is your test_Reg.php file :

echo '<script type="text/javascript">
      whatIWant = {fruit: "apple",
      car: "Lotus",
      age: 31,
      hobby: "coding"};
      </script>';

Maybe you can try storing the JSON as a session variable or in a cookie, and then retrieve it with Javascript. Both should be accessible after page reload.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM