My index.html has a button(id="my-btn"):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My INDEX PAGE</title>
</head>
<body>
<br><input type="button" id="my-btn" value="OPEN NEW WINDOW"/>
<script src="js/my.js"></script>
<script src="js/jquery-1.5.1.js"></script>
</body>
</html>
js/my.js handles button click event, when my-btn button is clicked, a new browser window will be opened with a new page(test.html)
my.js:
$('#my-btn').click(function(){
window.open('test.html', 'testwindow');
});
The new page(test.html) opened in new browser window:
test.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
</head>
<body>
<div id="my-name"></div>
<script src="js/test.js"></script>
<script src="js/jquery-1.5.1.js"></script>
</body>
</html>
In the new page, test.js will be invoked and it will append the text "JOHN" as the content of this page
js/test.js
$(document).ready(function(){
$("#my-name").append("<strong>JOHN</strong>");
});
But, when the test.html page opened in a new popped up browser window, I did not see the text "JOHN", it is an empty page, why?
(I have jquery-1.5.1.js under "js/" directory, and all JavaScript files are under js/)
Pretty simple here…
You’re calling $(document).ready… before $ is defined.
This happens in the jquery, so you need to switch up your script order: