I am building an Ajax Based application that will run on our local intranet network.
Now upon every return of request from my Ajax, I need to play a sound in my client browser.
I want to put a sound file (mp3/wav) in my web server (Tomcat) directory where the application will download
and play at the client browser. (I dont want to embed this and will just automatically play)
But I basically have this limitation.
Our target users intranet computers has no access to the outside internet since this is being block by our network team.
Most of the client runs on Windows XP and Flash might not be updated or not being installed.
I know a little jQuery but I dont know if what I am thinking is possible and what possible plugin can I use that is basically cross browser. My target browse runs on IE6/IE7/IE8/FF3.
Without flash and without a browser that supports HTML5 <audio> tags, that is going to be tough if not impossible.
My first idea was just to suggest http://www.w3schools.com/html5/tag_audio.asp. Usage
<audio src="/sound/ajax.mp3" id="ajaxdone"/>
// ajax success / readystate == 4
var mysound = $('#ajaxdone')[0];
mysound.play();
But that is also pretty much impossible in IE6 + 7.
In IE You could use <BGSOUND src= loop="1"> tag - append it and remove it before adding another.
I'm not sure which browsers accept that tag, and it's deprecated.
Related
I have web application
and i have situation i need to download file (on button click) to certain path in the client
without the browser download dialog box
using chrome (in IE im using activex).
what is the simplest way to do it?
The file is small text file (xml).
I know i have to use external application (flash...)
but i didn't find any info about how to do it or if there is other way
(i prefer to avoid using flash because my knowledge in flash is very limited)
To my knowledge, the only things that you can download from a browser without the user's interaction (and without using plugins, add-ons, activex, applets, ...) are cookies and HTML5 local storage, otherwise that will be a very serious security problem if a website can download any content to the user's machine without his permission and to a certain path .
Even Flash, can not do that, you should always get the user's permission to download something except SharedObjects which are the Flash Player cookies (can be disabled as the browser's cookies).
For AIR, you can not use an AIR app in the browser.
Hope that can help.
So I'm playing a game online on my laptop and it is a pretty simple html5 game but the optimization is nonexistant. The game with a few circles on my screen is using 85% of my cpu.
Logically, I started profiling the game and was trying to figure out if I could optimize it for my laptop. Now, what I'm wondering is how could I run the game but with a tweaked version of the JS script that is running.
If I try to save the page and run it from my laptop it of course has CORS issues so I can not access the server.
Can I somehow change the script a bit which is executing in my browser but while still staying "inside the webpage" which is running so that I may normally make XHR requests to the server?
Also, although this is not in the title of the question, can I somehow proxy the XHR request to my script but while not breaking the CORS rule?
Why is it so different if I run the same thing from my browser and from a saved HTML on my desktop? I have the same IP and am doing the same thing but from the url it "feels like" I'm running it from somewhere else. Can I somehow imitate that I'm running "from the webpage" but instead run it from a modified saved html?
You could proxy, given there isn't a cross domain protection mechanism or some sort of logging in (which complicates stuff).
What you could very well do is use a browser extension which allows you to add CSS, HTML and JavaScript.
I'm not entirely savvy on extensions so I'm not sure you can modify existing code but I'm guessing that if you can add arbitrary JS code you may very well replace the script tag containing the game for a similar personally modified script based on it. It's worth a try...
Link to getting started with chrome extensions
Update:
If you're set on doing it, proxying ammounts to requesting an URL with your application and do something with the page (html) instead of the original source. I assume you want to change the page and serve it to your browser.
With this in mind you will need the following, I dont know C# so you'll have to google around for libraries and utilities:
a way to request URLs (see link at bottom)
a way to modify the page, you need a DOM crawler
a way to start said process and serve it to your browser by hitting your own URL, meaning you need some sort of web server
I found the following question specifically on proxying with C#
I wrote code for dropdown Menu and want to insert that code in other html files.
DropDown Menu code.
http://jsfiddle.net/techspartan/49Bpb/
For inserting the above HTML code into other HTML files I am using this code:
<html>
<head>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#topdiv').load('index.html');
});
</script>
</head>
<body>
<div id="topdiv">
</div>
</body>
</html>
Basically I want to declare my DropDownMenu code at one location so that if I make changes in menu code than I don't have to edit every HTML file that has the DropDown.
The above code is working in Firefox but nothing is shown in Chrome and IE-10.
Are you working locally on your machine, without any webserver? Chrome does not allow loading files via AJAX from your file system (see bugreport).
You may use XAMPP or something similar to serve your files via a local webserver.
If you are on Windows, XAMPP is probably the easiest way to get your local webserver up and running: http://www.apachefriends.org/en/xampp.html
On Mac, you may also use MAMP http://www.mamp.info/en/index.html
You may also force Chrome to allow local file access on Windows if you are starting it with --allow-file-access-from-files, more information in this stackoverflow question
For what it's worth, I have code that uses jQuery().load() to inject content into a page, and it work just fine.
If this is static content that is meant to be a standard part of your page, then the other answers/comments saying to do it on the server are probably right; stuff like that is generally better to be included on the server, because it will make your site perform a lot better than doing it on page load via Javascript. (in fact, loading a static menu this way is likely to give your site a noticable performance problem when users load the page; be warned!).
However in general the technique of dynamically adding content to a page using Javascript is perfectly valid, and commonly used, so I'll answer the question based on that.
There's nothing that I can see that's specifically wrong with the minimal example you provided, except for a missing Doctype, so I'm going to guess that's probably your issue:
If you don't have a doctype, the browser will render the page in Quirks mode. And jQuery is not designed to work in quirks mode.
Solution: Add the following line to the top of your code and try it again:
<!DOCTYPE html>
You may also want to check that IE isn't showing your page in compatibility mode as well, because that might also cause problems. If it is, you could also add an X-UA-Compatible meta tag to your page's <head> section to force IE into standards mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Finally, if you need to support IE8 or earlier, you should switch from jQuery v2 back to the latest release of jQuery v1 (currently 1.10.2), as jQuery v2 does not work with IE8 and earlier.
Hope that helps.
The issue you are having is not due to anything wrong with your code, but with security policies of modern browsers. Here's what happens on your development machine:
Your browser loads your local HTML file.
Your browser executes the javascript, which tries to access a file on your machine.
Your browser says, "NO!" Because this is a huge security error - without this policy websites could read through every file on your hard drive or silently send copies of any of your private information to their servers, just because you visited a site with javascript enabled. BAD!
There are some ways to try to tell your browser "No, it's ok, I want to allow this..."...but you know, this has become exceedingly difficult as it often silently breaks with new browser versions. I've slammed my head against the wall way too often, so I might suggest you skip trying to make your browser OK with what you are trying to do.
Now, why does this work on a live site? Here's what happens.
Your browser loads a website.
Your browser executes the javascript.
The script asks for a file to be loaded/accessed from a website.
Your browser says..."well, we're already on this website, so sure! Load all the files you want from that web server!" And your browser kindly gets the file, and returns it to your script, where you can painlessly include the HTML to your hearts content.
To make this work on your development machine, you have ultimately 3 choices:
1) Upload the files to a web server, then do your testing there.
2) Make your own "localhost" web server. You then access your site with something like localhost/index.html - etc. This is just enough to prevent the browser from shutting down your file load requests, because you are requesting an HTTP operation, note a FILE operation.
3) Try to force your browser to allow these requests. Details vary by browser, some browsers won't let you do this at all, and I've given up on doing this myself.
The hidden 4th choice is using HTML5 File System features, but with such poor support for technology I suggest you not even try it - the bug you are facing is purely with your development machine, so changing the technology you are using purely for a minor development convenience seems silly.
Severin provides links to the excellent XAMPP and MAMP software packages, which are the easiest way of getting yourself a good development localhost server.
Can Javascript cause browsers generally (and Chrome for Mac in particular) to invoke an external helper application for a URI without opening a new tab/window, or navigating away from the current page?
The context is that I am developing an extension for Chrome that occasionally needs to invoke particular actions outside of the browser. Using the rather neat trick described here, the extension only need open particular URIs to invoke suitable AppleScript.
However, how should one open such URIs from a script running in an extension's background page? I don't think XMLHttpRequest will help, as Chrome won't (shouldn't?) attempt to use an external helper application for XHR; nor does it appear that setting window.location.href has any effect on such a background page (it is not a problem if the background page is unloaded).
My current solution is to open a new window, but it's unnecessary and rather distracting for the user.
There are a few options here:
You could write an NPAPI plugin.
You can use a WebSocket client in the browser, and run a local server on your desktop. That way you establish a tunnel to your local machine to do pretty much anything you want there.
I did this for relaying global media key presses to control web-based music players and wrote it up. Source here.
I just realised I can do this with an <iframe/> in the background page. Très simple!
I would like to allow the user to directly download a file with a single click. There is however a problem when it comes to known MIME types like HTML, audio, video, etc. Ideally, I would like to trigger a download prompt for audio/video files. Ultimately, I would like to do it for HTML documents too. The main idea is to make it easy for users to download files without asking them to navigate into the context menu.
I think for example to people that are not really comfortable with a computer and its main functions. These people will surely prefer a better way than "save as".
The reason why I am looking for a JavaScript solution is that the PHP approach only works if you are in a web site context. Whenever you are inside a plugin or injected script context (i.e. developing a plugin for Firefox, Chrome or Safari), you may want to avoid asking for a server-side response.
I tried to achieve this with window.open() and document.execCommand("saveAs",.... It does work, although it is glitchy and fails for huge files.
Then, I tried Downloadify which does not work in every situations.
Is there a pure JavaScript, no Ajax way to trigger a download prompt so the user can directly download a file using a simple left click?
There is a new download attribute in HTML5 that you can annote links with. It indicates to the browser that the resource should be downloaded rather than navigated to. Right now, it only works in Chrome, but it is part of the HTML spec and will hopefully be adopted by other browser soon.
Demo: http://html5-demos.appspot.com/static/a.download.html
More info: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
If someone reaches this question now the best solution is
<a href="example" download target="_blank">
If the browser supports the HTML5 attribute download will start the download of the file, otherwise (in case of Internet Explorer and old browsers) the link will open another tab window with the file to download.
You can use <a href="example" download>. This is HTML5 and it works with Chrome, Firefox and Edge (but not with Internet Explorer, not even modern versions).