I want to develop a Chrome extension that scrapes data off the page, but this can happen only after all of the pages ajax finish loading their remote content.
Is this possible?
In general, you can't detect when all scripts are finished loading. It is fairly common for a page to wait a couple seconds after the 'onload' event to request an additional round of scripts -- for example, if you want to delay-load ads but don't want to slow down the initial page rendering.
However, extensions do have a flag to run at "document_idle". This flag supposedly makes Chrome wait until the page is "idle" before injected the extension's script. It would not, however wait for a delay-loaded script and it may not even wait for a slow XHR.
More information can be found at http://developer.chrome.com/extensions/content_scripts.html
I think you can't do that, but if you want to check if a particular external script is loaded you can check this:
Verify External Script Is Loaded
Related
My eventual goal is to find all resources that the webpage is attempting to load, stop them from loading, and then list them (so that the user can see what the webpage tried to load). Can anyone help me get started with the necessary JavaScript that I'll need to both stop the page from loading and print the resources? I'm just kind of lost on what the first step should be.
Take a look at webrequest for chrome extensions:
https://developer.chrome.com/extensions/webRequest
I would suggest to create a callback for onBeforeRequest() and then checking what resources are being fetched and loaded.
You can cancel a particular web request from this callback.
My web app loads an external JS file that sometimes hangs for 30+ seconds, making my page hang in turn.
I know I can take it out of the head, or load the file from my own server, or switch services. However, I was wondering if there's a way to stop loading external files if they're unresponsive for some amount of time.
Loading JavaScript files asynchronous can be a tricky thing if you have dependencies between the files. I'd prefer placing the <script>-tag in the bottom of the <body>. This way you can put dependencies underneath it, and in the dependencies you check for a variable only availably in your slow JS-file before executing functions dependant on the slow JS-file. You also write that you could place the JS on your own server, so I guess it's on an external domain. If this is the case you can't use an ordinary XMLHttpRequest/AJAX call to load the JS-file asynchronously anyway.
If you absolutely want to load the file asynchronously and are ready to deal with the issues this might give you, then take a look at http://headjs.com/.
I don't think it is possible to link external file in regular way and specify custom timeout for its loading.
You can try to make ajax request to file address and in the same time set timeout for 30 seconds. If request stills running you can cancel it. Otherwise inside html page you may create script tag with loaded content.
I am creating a complete ajax application where there is one base page and any pages the user navigates to within the application are loaded via ajax into a content div on the page. On the base page I include the various scripts that are needed for every page within the application (jQuery, jQuery-UI, other custom javascript files). Then on the various pages with the application I include a script or two for each page that contains the logic needed for just that page. Each of those script files have something that executes on the page ready event. The problem is that every time the user navigates to page1, the page1.js file is loaded. So, if they visit that page 10 times, that script is then loaded ten times into their browser. Looking at the Chrome script developer tools after running around the site I see tons of duplicated scripts.
I read somewhere about checking to see if the script has already been loaded using a boolean value or storing the loaded scripts in an array. But, the problem with that is that if I see the script is already loaded and I don't load it, the page ready function doesn't get fired for the page's javascript file and everything fails.
Is there an issue having the javascript file loaded over and over when the user visit the same page multiple times?
I did notice looking at the network traffic that every time we visit the page, the script is requested with a random number parameter (/Scripts/Page1.js?_=298384892398) which causes the forced request for the script file every time. I set the cache: true settings on the jQuery ajaxSetup method and that removed the parameter from the request and thus the cached version of the javascript file was loaded instead of actually making a separate HTTP request for it. But, the problem is that I don't want all the ajax requests made to be cached as content changes all the time. Is there a way to force just javascript files to be cachced but allow all other ajax requests to be not cached.
Even when I forced caching on all requests, the javascript file still showed up multiple times in the developer tools. Maybe that isn't a big deal but it doesn't seem quite right.
Any advice on how to handle this situation?
About your first question:
Every time you load a JavaScript file, the entire content gets evaluated by the browser. It solely depends on the content if you can load and execute it multiple times in a row. I'd not consider it a best practice to do so. ;)
Still i'd recommend that you find a way to check if it was already loaded and fire the "page loaded" event manually within the already present code.
For the second question: I'd assume that the script is intended to show up multiple times when including it multiple times. To give an advice on how to not cache the loaded JS i'd need to know how you loaded the code, how you do AJAX and the general jQuery setup.
After doing some more research it looks like it is actually just a Chrome issue. When you load a script via AJAX you can include the following in your code to get it to show up in the the Chrome developer tools
//# sourceURL=some-script-name
The problem is that when you navigate away from the page, the developer tools keeps the script around, but it is actually not longer referenced by the page.
I'm looking for tips on how to get the browser to kick off an AJAX call as soon as possible into processing a web page, ideally before the page is fully downloaded.
Here's my approximate motivation: I have a web page that takes, say, 5 seconds to load. It calls a web service that takes, say, 10 seconds to load. If loading the page and calling the web service happened sequentially, the user would have to wait 15 seconds to see all the information. However, if I can get the web service call started before the 5 second page load is complete, then at least some of the work can happened in parallel. Ideally I'd like as much of the work to happen in parallel as possible.
My initial theory was that I should place the AJAX-calling javascript as high up as possible in the web page HTML source (being mindful of putting it after the jquery.js include, because I'm making the call using jquery ajax). I'm also being mindful not to wrap the AJAX call in a jquery ready event handler. (I mention this because ready events are popular in a lot of jquery example code.)
However, the AJAX call still doesn't seem to get kicked off as early as I'm hoping (at least as judged by the Google Chrome "Timeline" feature), so I'm wondering what other considerations apply.
One thing that might potentially be detrimental is that the AJAX call is back to the same web server that's serving the original web page, so I might be in danger of hitting a browser limit on the # of HTTP connections back to that one machine? (The HTML page loads a number of images, css files, etc..)
You can use the jQuery onavailable plugin, which will execute as soon as an element is rendered on the page. You can have it execute once an element that is high up on the page renders.
I have some tabs that are ajax powered. So everytime a tab is clicked all data is loaded including javascripts. So if they click on say Tab A then click on Tab B and finally Tab A. All Tab A scripts will be loaded twice.
Now I am wondering how does the caching work. On the second time they click on Tab A how much faster will these scripts download? Or will it be as slow as the first time?
Thanks
Assuming a fairly regular load, the script will load the first time, and be pulled from the cache from then on.
Unless you're doing something tricky.
Just like you can load a huge script on the first page request of a more traditional site, and include that script of subsequent pages, but after the first page load, the browser will (typically) just pull it from cache.
Use firebug and observe the behavior.
If you are loading the same URL, the browser will use the cached version. If you want to circumvent caching, add "?" followed by a random string to the url every time u call it.