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.