How to open a browser to show the content of a file? - javascript

I trying to open a txt document in a enyo application for mobile and I didn't found anything, so can I open that file on the mobile browser or inside the application using javascript or other way?
Thanks!

You should be able to use Ajax to request the file and the place the response into the content of an instance of a Control. i.e.:
{name: "textfile"}
...
this.$.textfile.setContent(inResponse.data);
If you wanted to have HTML in it then you'll need to set the allowHtml property to true.
Check out https://github.com/enyojs/enyo/wiki/Consuming-Web-Services for more info on Ajax. And, yes, you use Ajax to request local (on device) files, too.

Related

Force browser to reload the Javascript files

I am trying to achieve the below in ASP.NET MVC3 web application which uses razor.
1) In my Index.cshtml file, I have the below reference.
<script src="/MySite/Scripts/Main.js"></script>
2) I load my home page for the first time and a http request is made to fetch this file which returns 200.
3) Then, I made some changes to the Main.js and saved it.
4) Now I just reload the home page (please note that I am not refreshing the page) by going to the address bar and typing the home page url and pressing enter. At this point, I want the browser to fetch the updated Main.js file by making a http request again.
How can I achieve this? I don't want to use System.Web.Optimization bundling way. I knew that we can achieve this by changing the URL (appending version or some random number) everytime the file changes.
But the challenge here is the URL is hardcoded in my Index.cshtml file. Everytime when there is a change in Main.js file, how can I change that hardcoded URL in the Index.cshtml file?
Thanks,
Sathya.
What I was trying to achieve is to invalidate browser cache as soon as my application javascript file (which already got cached in the browser) gets modified at the physical location. I understood that this is simply not achievable as no browsers are providing that support currently. To get around this below are the only two ways:
1)Use MVC bundling
2)Everytime the file is modified, modify the URL by just appending the version or any random number to the URL through querystring. This method is explained in the following URL - force browsers to get latest js and css files in asp.net application
But the disadvantage with the 2nd method is, if there are any external applications referring to your application's javascript file, the browser cache will still not be invalidated without refreshing the external application in browser.
Just add a timestamp as a querystring parameter:
var timestamp = System.DateTime.Now.ToString("yyyyMMddHHmmssfff");
<script src="/MySite/Scripts/Main.js?TimeStamp=#timestamp"></script>
Note: Only update TimeStamp parameter value, when the file is updated/modified.
It's not possible without either using bundling (which internally handles version) or manually appending version. You can create a single file bundle as well if you want.

UWP: webview does not display page using navigateToString method

I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.
A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.

Jquery Mobile .load() not retrieving content from Application Cache

I have an application that uses cache.manifest to cache HTML content locally. When I retrieve this content using Jquery .load(), the content is NOT retrieved from the application cache and the call fails if the device is offline.
The files specified in cache.manifest are being loaded, I can see that in charles when I load in the site.
When offline I can enter the cached file URL in the browser and it shows it just fine, just not using .load(), so I am sure that the cache.manifest is loading everything correctly.
My question is, how can I load the HTML pages using jquery or plain JS, and make sure it uses the application cache if the device is offline?
CACHE MANIFEST
/m2/docs/e5a133db912860d8ec124cce9caa78d1/Q00X03.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/M00X03.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/Q97X01.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm
/m2/style.css
/m2/docs/e5a133db912860d8ec124cce9caa78d1/index.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/doc.json
Then calling like this:
$("#docu").load("/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm");
Any help is appreciated.
I was able to get it working doing this (rather messy):
In my application I made a hidden iFrame:
<div style="display:none;">
<iframe id="dummyContent"></iframe>
</div>
Setup a listener for this iFrame to read out the BODY and insert it into my display element anytime it loads:
$("#dummyContent").load(function(){
var $con = $("#dummyContent").contents().find("body");
$("#docu").html($con); // docu is my display div
});
Set a click handler for the content retrieval button to set the src of the iFrame to my content:
THIS is loaded from Application Cache as expected.
$("#questionButton").click(function(ev) {
$("#dummyContent").attr("src","/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm");
});
I would appreciate it if anyone had a different method, perhaps not using an iFrame. This solution is right up there with using tables to align page content...

Is it possible to load in a local version of a JavaScript file instead of the server version?

Just had a quick question to throw out and see if there was a solution for this...
Let's pretend I have no access to the server.
I load up a webpage and find out that they have a Javascript file loading from a subfolder (let's say /scripts/js/some.js)
Now, I want to make changes to this file locally and test it against the whole site without downloading the entire site to a local folder.
Does anyone know of a way I can override the loading of that remote js file in favor of a local/edited copy of it?
Try using noscript or adblock to block the server side script from loading. Then use greasemonkey to load your own script.
I actually found a solution for this. Posting details for anyone that comes here looking for it.
Privoxy (www.privoxy.org/) [Free] Allows this for the most part through a redirect. Though Firefox may block the redirect depending on where you put it. This means you most likely will not be able to save the file locally and reference it via file://etc/
( I wish I had a way to tell you how to statically fiddle with JavaScript on web pages you have limited access to... but I have not found it. If an answer comes along I will accept it over this. )
Of course, you have to set up Privoxy, and use it as a local proxy server. It's pretty simple if you only use it temporarily: Just point your browser to proxy 127.0.0.1 on port 8118 with it running.
You have to add a redirect "default action" (Options > Edit Default Actions) to redirect the browser to use your new copy:
{ +redirect{/newLocation/some.js} }
/scripts/js/some.js
If you want a way to use a local file instead of a remote file (in any web browser), I highly recommend Charles Web Proxy. http://www.charlesproxy.com/
In Charles, go to the Tools menu and select Map Local. Add a new mapping by entering the address of the file on the web you would like loaded from your disk.
This technique will for all sorts of files (JavaScript, CSS, SWF). Of course you have the option to temporarily disable this feature, and it will only work while Charles is running. Very handy.
While your solution with proxy is somewhat more permanent, I found that with Fiddler you can do it with almost no configuration:
How to replace Javascript of production website with local Javascript?
In a browser that supports FileReader such as Chrome, yes, in combination with 'eval' to execute arbitrary JS. In your HTML add a button for the user to press:
<form>
<input type="file" name="file"
onchange="loadJS(event.target.files);">
</form>
In your scripts add:
function load() {
var reader = new FileReader();
reader.onload = function(evt) {
eval(evt.target.result);
};
reader.readAsText(files[0]);
}

Follow a URL using JavaScript

Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.

Categories