I'm working on a Node.js website, I've taken the work on for a charity and I confess I'm learning on the job.
The page in question starts with content rendered, but invisible. When you click a button that redirects to a URL starting with a # ( which means it gets appended to the page ), no get occurs, but the content is revealed . The issue is, it needs to be filtered. However, I cannot figure out what is triggering this. The word 'hashchange' does not occur in the code base. The window.onhashchange event is null. Where would I look to try to track down the code that is doing this ?
The content after the hash mark is called an URL fragment. URL fragments are not sent to the server and appending an URL fragment does not typically invoke a page fetch, so it makes sense that no get occurs.
URL fragments are commonly used to keep track of navigation state on the browser side. This is common with single page apps (SPA) that will only fetch the entire page from the server once, and handle the rest of navigation using javascript, pushState, and AJAX queries.
This is presumably what is happening when you navigate to different tabs. The client side javascript is appending URL fragment in order to push state onto the browser history without forcing an unnecessary page reload. Note that this code does not need to listen to the onhashchange event in order for this to work, which is why you don't see any mention of it in your code search.
Related
I have an application in Node/Express that is exhibiting some strange (to me, at least) behavior. I am not sure why this happens, but as soon as I begin typing in the URL, the web page instantly comes up. All the logs start populating data and I have my home screen. This is on a local instance for now as I'm still trying to work out bugs related here. I believe these two may be inter-related, but I can't find any data online; perhaps I'm using the wrong search terms, but the long and the short of it is this:
I'm connected to a VM (CentOS7) and everything is run through AWS. I type in my IP:PORT (e.g. 12.34.56.78:9999). As SOON as I type the '1' in the URL, all the logs fire, running through all the scripts. Since I'm at my home page, I hit 'Enter' and is SUPPOSED to go through a redirect to an authorization page (e.g. 12.34.56.78:9999/auth). At that point we're running into my original post, identified above, but this question is simply an attempt to understand why my web page is being shown before I ever 'finish' the call by hitting the 'Enter' key. Is this normal behavior when an application is being accessed locally?
Because your browser is "smart" and guesses that you want to open that website and will therefore load it before you complete the url. That of course only happens if you have previously visited that site, otherwise the browser does not know the url yet. What logic the browser internally uses for this decision depends mostly on the browser and its settings, wether it factors in how recently you visited it or how often, or ...
If you actually want to browse that website when you finish typing the browser has already loaded the page and can instantly display it instead of now loading it and letting you wait a couple of seconds. If you decide you want to go to 123.com instead the browser simply discards the preloaded page and continues as normal.
I have a fundamental question and I am searching for that for a long but I still don't know the exact response for that.
I am working with browsers and web applications. I am wondering how and based on what a web browser decide to send a particular request to the web server.
For example when you enter http://www.google.com inside the address bar of your web browser. the Browser will send a bunch of request to the web server for rendering the web page properly.
Now, my question is that how the web browser decide which request it needs to send to the web server.
does it related to some tags like 'link' or 'script' inside the body of the responses.
does the browser parse the javascript functions to see if it should send a request based on those functions?
Lets take an example to explain this one.
Consider you want to search for something and you hit http://www.google.com on your browser. These are the events that unfold to fetch you the page that will let you type in your query.
First, the networking stack on your machine will try to figure out which actual internet address matches www.google.com. This is called a DNS lookup. Once it receives a response for this lookup in form of an IP address, it can make a connection to the actual server that is serving google.com.
The machine makes a socket connection and uses the HTTP protocol to communicate with the server. It queries for the resource at / (which is the root) of the address you are trying to reach. This is called a GET request. The request is normally described like so: GET /
Google will respond with an HTML page. normally "index.html", which gets downloaded by the browser.
Once the HTML is downloaded, all linked resources, such as images to render the HTML as well as javascript referenced by the HTML page gets downloaded.
The downloaded HTML page is parsed and an in-memory tree is created called the "DOM Tree". This tree contains the elements of the HTML page in a hierarchy. Once the DOM is created, you can see the page being rendered on the browser.
During this parsing, the browser discovers more resources to be downloaded, such as images, stylesheets, javascript files. The HTML page references these resources via different tags such as <img> for images, <script> for javascript.
All detected resources are downloaded. Browsers download many of these resources in parallel, but apply them (javascript and stylesheets) sequentially in the order they where found on the page.
Stylesheets are parsed, and the styles are applied to the DOM of the HTML page. Sometimes, if stylesheets take longer to download, you can see the "raw" HTML page being rendered before the styles are applied. This happens sometimes over a slow connection.
Once the HTML page and related javascript files have been downloaded, the browser calls the "onload" callback function of javascript. Most Javascript heavy applications are started at this time.
Once onload is called, Javascript takes over and can attach handlers for different elements on the web page. Once the handlers have all been installed, interacting with the webpage could call one or more javascript functions that are listening for these events.
Javascript can also manipulate the DOM (the elements on the page), which results in UI updates (what the user sees) and therefore can be used to build a complete app on a single page.
Here is some more reading on the process: http://friendlybit.com/css/rendering-a-web-page-step-by-step/
The best way to examine this interaction is to use Developer tools on Chrome/FireFox or IE and view the network activity when you visit a web page.
I wonder if there is a better way to write my PHP sites without always having to manually refresh the page I'm working on. Could there be a program that monitors a folder and automatically refresh my browser whenever a change occurs. I'm developing on a local machine with a local amp stack by the way.
You can achieve this by ajax. In ajax you can check the changes in database if any new record added you can call
location.replace('');
in ajax success
Use Ajax poll (checking for status change on server with time intervals) and when the change occurs, either refresh the page with Javascript or replace the part of it to reflect the change.
I'm trying to write a userscript/Chrome extension to capture JSON data being sent while using a web service so that I can reformat it and display selected portion on page. Currently the JSON is sent as the application loads (as I've observed from watching traffic with Fiddler 2). Is my only option to request the JSON again or is capture possible? As I'm not providing a code example, a requested answer is even some guidance on what method / topic to research or if I'm barking up the wrong tree.
No easy way.
If it is for a specific site you might look into intercepting and overwriting part of a code which sends a request. For example if it is sent on a button click you can replace existing click handler with your own implementation.
You can also try to make a proxy for XMLHttpRequest. Not sure if this even possible, never seen a working example. You can look at some attempts here.
For all these tasks you probably would need to run your javascript code out of sandboxed content script to be able to access parent page variables, so you would need to inject <script> tag with your code right into the page from a content script:
I have a SharePoint web part that gets XML data from an .ASHX page, parses it and displays it using JavaScript. Everything works fine, until the XML changes. When I view the web part in IE, the new data is not updated until I close the browser. Even doing a CTRL-F5 does not grab the new data.
Firefox displays the new data immediately, with just a simple page refresh.
I have added a timestamp to the query string of my .ASHX page so that the XML result is not cached, but that did not fix my IE woes. Any other ideas?
Edit
The .ASHX page is using the API to access a list and is building the XML string, then returning that as an application/XML content type. I have confirmed that the XML is updated to reflect the new data in the list. I am also able to see the data consumed in the web part when it is displayed in FireFox.
Solution
I actually was generating the timestamp to append to my query in the server code, and then putting that string in the javascript. Once I moved the timestamp code to the javascript, things started working much better.
It's most likely cached, there's no other logical explanation why it would work in Firefox and not in IE. Try reloading IE several times in a row.
Check what headers that .ashx page sets.
It's not just your browser which could be caching the page, any middleware including web server might have a flawed caching implementation. You can also try using HTTP POST instead of GET because according to HTTP specification, POST requests should never be cached.
Is it a custom Web Part or one of the out-of-the-box Web Parts? It would make it easier to help you if you provided any more information on how you're retrieving the data from the HttpHandler (ashx).