I am trying to run a simple web page offline. Meaning I am launching the html page directly from my desktop without a server. Firefox & Safari are not giving me any trouble but IE is of course. IE versions 9+
I am using Jquery to do a Ajax call to a local json file and the damn ajax call are just not completing.
I have tried $.get, $.post, $.ajax, $.getJSON, $("body").load(), but none work.
I have also tried different urls
file:///C:/Users/user/Desktop/file.json
C:/Users/user/Desktop/file.json
C:\Users\user\Desktop\file.json
I tried different Jquery version too 1.8.3, 1.11.3, 2.1.3
I have simplified it to bare bones
$(document).ready(function () {
$.get("file:///C:/Users/user/Desktop/file.json", function(data){
console.log(data);
}).done(function(){
alert("done");
}).fail(function(){
alert("fail");
});
});
That is blocked for security reasons, it is also blocked by chrome on default.
If you want to access a file please use a javascript upload script. Maybe this tutorial will help: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Related
A website is running a jQuery script. I want to use a Chrome Extension to have the site run my own version of the jQuery script, and not the normal one.
So far, I've managed to make the chrome extension find where the website calls the normal script, and I've replaced it with my own:
document.querySelector("script[src^='website.com/originaljqueryscript']").src = 'myjqueryscript';
As a test, I made myjqueryscript the exact same script as the originaljqueryscript. I set the run_at in the manifest to run at document_end.
When I try to open the website with my script enabled, the console logged an error $(...).dialog is not a function. I think this is because jQuery is not loaded in my chrome extension. So then I found which version of jQuery the website is using, and added that to my chrome extension. Now I get this error: $(…).dialog is not a function I believe that error is due to a conflict between the two jQuerys that have been loaded (one on the website, one from my extension).
Am I on the right track, or is there a better way to replace a websites jQuery script with my own?
If this is for a very specific website, loading jQuery from a specific URL, you can use webRequest API to intercept the request to jQuery and redirect it to a file bundled in your extension. E.g.:
chrome.webRequest.onBeforeRequest.addListener(
function(details) { return {redirectUrl: chrome.runtime.getUrl("js/myjquery.js")}; },
{urls: ["https://example.com/js/jquery.js"]},
["blocking"]
);
(Note: this sample is very minimal; you may need to include and inspect request headers to make sure that the source page is your target site - you really don't want to replace a CDN-provided jQuery for all sites)
This assumes that the website does not use Subresource Integrity checks, however I believe that it will bypass a script-src Content Security Policy (redirect is transparent).
Note that .dialog() is part of jQuery UI, not core jQuery; the site presumably loads both, and you'll need to intercept both. It's possible that the site actually bundles them together.
I am working on an ASP.Net MVC 5 application that has lot of ajax calls using jquery post as well as Kendo UI DataSource. I have a problem previously with relative urls which are working when I run the project from VisualStudio under IIS Express where the URL does not have site name (ex. http://localhost:22332/ ) and It stopped working once I deployed this to test because of site name in the url (http://orgname.com/SiteName/).
I have resolved this by setting "base" in my _Layout.cshtml page like this.
<base href="~/" />
Everything was fine until I ran into issue with one ajax call on IE9.
My Ajax call is like this:
$.post("Controller/Method")
when I am on the page http://localhost:36380/Controller/New, the above jquery post is submitted to http://localhost:36380/Controller/Method in Chrome, IE10 and IE 11, which is what is expected.
But in IE 9 it is being submitted to http://localhost:36380/Controller/New/Controller/Method
value of base is same in all the browsers which is "/" for localhost.
Is there a different behavior that I need to handle for IE9? This post is in a js file. If I can use ASP.Net MVC helper from a js file that can solve my problem too. Any suggestions?
I have a Rails app that uses an ajax call to (right now) get a JavaScript alert message. It works in Safari and Chrome, but not in Firefox (all current versions). I can step through the code in Firebug and there are no errors raised, yet in the Console section, it lists nothing. Not even an error from the server; nothing. As if Firefox just forgot to do anything about it. Why would this not work?
Here is my code (in CoffeeScript):
jQuery ->
$.ajax
url: "advertisements/grab"
method: "GET"
dataType: "script"
The problem was Adblock Plus. Once I disabled it, then the Ajax was working correctly.
I have spent almost the whole day trying to find a solution to this problem.
I have successfully written code to dynamically retrieve and display the whole lot of fonts using the Google fonts API and jQuery 1.4.4. (works in all browsers)
I have had to change jQuery to version 1.7.2 and unfortunately noticed that the code I wrote works well in all browsers except for Internet Explorer.
I did some testing and found that in Internet Explorer $.getJSON or $.ajax fail to load the JSON font data from Google when using jQuery versions higher than 1.4.4.
This is the code I am using:
$(function(){
$.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key=XXXXXX', function(json) {
alert(json);
});
});
After some research I have tried this too:
$.ajax({
type: "get",
url: "https://www.googleapis.com/webfonts/v1/webfonts?key=XXXXXXXX",
cache:false,
dataType:'json',
success: function(data){
alert(data);
}
});
Both methods fail in Internet Explorer using any jQuery version greater than 1.4.4 - nothing happens.
Any ideas why?
Thanks for the help.
It seems to be IE that is blocking connection to hosts outside of your site's domain. This is due to the Same Origin Policy. This is usually not a big deal with the latest and greatest browsers out there, although it can still occur with any browser. I tested your code using JSFiddle and it threw an error about same origin in Chrome 21.
Normally, the way to fix this is to use JSONP. Unfortunately, the Google Webfonts API does not support JSONP. The best way that I can think about getting that data cross-browser is to download the JSON using a server-side programming language such as PHP. From there, you can echo the JSON out to the page and use the $.getJSON function to grab that data locally on your server.
EXAMPLE: fontApi.php (local file on your server)
<?php
$json = file_get_contents('https://www.googleapis.com/webfonts/v1/webfonts?key=XXXXXX');
die($json); // prints JSON to the screen that jQuery can use
?>
Then use the following jQuery...
$.getJSON('fontApi.php', function(json) {
//your code
});
Hopefully this helps you out :)
Is it possible to download the entire HTML of a webpage using JavaScript given the URL? What I want to do is to develop a Firefox add-on to download the content of all the links found in the source of current page of browser.
update: the URLs reside in the same domain
It should be possible to do using jQuery ajax. Javascript in a Firefox extension is not subject to the cross-origin restriction. Here are some tips for using jQuery in a Firefox extension:
Add the jQuery library to your extension's chrome/content/ directory.
Load jQuery in the window load event callback rather than including it in your browser overlay XUL. Otherwise it can cause conflicts (e.g. clobbers a user's customized toolbar).
(function(loader){
loader.loadSubScript("chrome://ryebox/content/jquery-1.6.2.min.js"); })
(Components.classes["#mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader));
Use "jQuery" instead of "$". I experienced weird behavior when using $ instead of jQuery (a conflict of some kind I suppose)
Use jQuery(content.document) instead of jQuery(document) to access a page's DOM. In a Firefox extension "document" refers to the browser's XUL whereas "content.document" refers to the page's DOM.
I wrote a Firefox extension for getting bookmarks from my friend's bookmark site. It uses jQuery to fetch my bookmarks in a JSON response from his service, then creates a menu of those bookmarks so that I can easily access them. You can browse the source at https://github.com/erturne/ryebox
You can do XmlHttpRequests (XHR`s) if the combination scheme://domain:port is the same for the page hosting the JavaScript that should fetch the HTML.
Many JS-frameworks gives you easy XHR-support, Jquery, Dojo, etc. Example using DOJO:
function getText() {
dojo.xhrGet({
url: "test/someHtml.html",
load: function(response, ioArgs){
//The repsone is the HTML
return response;
},
error: function(response, ioArgs){
return response;
},
handleAs: "text"
});
}
If you prefer writing your own XMLHttpRequest-handler, take a look here: http://www.w3schools.com/xml/xml_http.asp
For JavaScript in general, the short answer is no, not unless all pages are within the same domain. JavaScript is limited by the same-origin policy, so for security reasons, you cannot do cross-domain requests like that.
However, as pointed out by Max and erturne in the comments, when JavaScript is written as part of an extension/add-on to the browser, the regular rules about same origin policy and cross-domain requests does not seem to apply - at least not for Firefox and Chrome. Therefor, using JavaScript to download the pages should be possible using a XMLHttpRequest, or using some of the wrapper methods included in your favorite JS-library.
If you like me prefer jQuery, you can have a look at jQuery's .load() method, that loads HTML from a given resource, and inject it into an element that you specify.
Edit:
Made some updates to my answer based on the comments about cross-domain requests made by add-ons.
if you only write a text web page downloader with your mind,and you only know html and javascript, you can write a downloader name "download.hta" with html and javascript to control Msxml2.ServerXMLHTTP.6.0 and FSO