When ever I output window.location.search it shows me results like this:
?x=0.8690746387001127 or any other number
but actually it should be something like
?filename=tryjsref_loc_search
Can anybody explain why it is doing this?
Here is my example code
//page url: .asp?filename=tryjsref_loc_host
<!DOCTYPE html>
<html>
<body>
<script>
document.write(window.location.search)
</script>
</body>
</html>
output of code
?x = 0.8690746387001127
When ever I output window.location.search it shows me results like this:
?x=0.8690746387001127 or any other number
but actually it should be something like
?filename=tryjsref_loc_search
Can anybody explain why it is doing this?
Here is my example code
//page url: http://w3schools./jsref/tryit.asp?filename=tryjsref_loc_host
<!DOCTYPE html>
<html>
<body>
<script>
document.write(window.location.search)
</script>
</body>
</html>
output of code
?x = 0.8690746387001127
Share Improve this question edited Oct 19, 2012 at 20:03 Pete Carter 2,7313 gold badges25 silver badges35 bronze badges asked Oct 19, 2012 at 19:57 Adeel AkramAdeel Akram 3902 gold badges4 silver badges13 bronze badges 7- what you want? the geo location? – Toping Commented Oct 19, 2012 at 19:59
- What exactly is your problem? – Johnny Graber Commented Oct 19, 2012 at 19:59
- His issue is that it should show the query string in the url – atmd Commented Oct 19, 2012 at 20:01
- Out of interest, what happens when you just use location.search? – atmd Commented Oct 19, 2012 at 20:02
- What is the address bar showing when you run that script? – David Hellsing Commented Oct 19, 2012 at 20:03
2 Answers
Reset to default 3First of all, w3schools is not a good website to learn from. I'd remend jqFundamentals instead (the "javascript basics" section)
That being said, the window.location.search gives you the current querystring of the window. In the case of w3school's "Try It" site, this appears to be a Math.rand() which is usually used as a cachebuster technique.
If you have fiddler (or any other network traffic monitor) running when you click the "submit" button, you'll see the full URL is http://w3schools./jsref/tryit_view.asp?x=0.42147885356098413.
MDN is a great source of javascript documentation, their entry on window.location.search says:
search | the part of the URL that follows the ? symbol, including the ? symbol. | ?q=devmo
I assume you're not very confortable with HTML and HTTP, and that you're learning and therefore didn't investigate the page's source code to find out what was happening.
That's perfectly okay.
Here's a simplified version of that page's source code:
<form id="tryitform" name="tryitform"
action="tryit_view.asp" method="post"
target="view"
onsubmit="validateForm();">
Source Code: <input type="button" value="Submit Code »"
onclick="submitTryit()">
Result: <textarea id="pre_code">
<!-- Your source code goes here -->
</textarea>
<input type="hidden" id="code" name="code" />
<input type="hidden" id="bt" name="bt" />
<iframe id="viewIFRAME" name="view"
src="tryit_view.asp?filename=tryjsref_loc_host">
</iframe>
</form>
<script type="text/javascript">
// This Script is called when you press the "Submit Code" button
function submitTryit()
{
// I'll omit the code, but what it does is this:
// 1. Take the text (your code) in the 'pre_code' textarea
// and substitute '=' with 'w3equalsign'
// and 'script' with 'w3scrw3ipttag'.
// 2. Put the modified text in the 'code' hidden input field
// 3. Change the form's action to "tryit_view.asp?x=" + a random number
// 4. Call validateForm(), which basically
// only checks if the code doesn't exceed 5000 characters
// 5. Submit form
}
window.onload = function(){ submitTryit() }
// Call submitTryit() when the page first loads
// so the view is filled also when you first arrive.
</script>
The key idea to understand here is that the code you write goes on a form where the action attribute is set to "tryit_view.asp?x=" + a random number, and the target attribute is set to "view". This target attribute on the form means the result of the form's submission should appear on the iframe which as the attribute name set to "view".
So you see, the problem is that your code isn't actually being run on the page you're seeing on the browser. It is in fact being sent in a POST to the server.
The server then responds with a different page which goes to fill the contents of the iframe.
An iframe is basically a "mini-browser in a rectangle" that appears nested inside the main page, and it has a different URL which has nothing to do with your main page's URL and does not appear on the address bar. This URL is instead the URL of the form's action.
Now presumably what the server does in response to the POST is simply create an HTML page with the code you submitted, after reverting those weird text substitutions above.
And so your code ends up running inside the iframe.
So, when you write window.location or just location, your code will end up actually accessing the iframe's location and not your main page's location.
You can access the parent page's location like this:
// 'parent', same as 'window.parent', refers to
// the frame which is the parent of the frame where
// this code is being run (the iframe named 'view').
document.write( parent.location.search );
Or like this:
// "top" is the frame at the top of the frame hierarchy
document.write( top.location.search );
Good luck on your learning!