HTML5 & Javascript - javascript

I know nothing about javascript. Just want to tweak a chunk of code a little bit, but couldn't find answers on the net, or at least one that i can understand. Hope you can help me out.
It's an onMouseover/onClick javascript (plays audio) event for HTML5. The HEAD part of the script says in one place:
<Script>
............
...........
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
In other words, as best as I can understand, this means if the User's browser doesn't support HTML5 audio, the script will return this error message/dialog: "Your browser doesn't support HTML5 audio unfortunately".
But, I don't want this error message/dialog to be returned/generated/thrown whatever! Instead, I would prefer greatly the script to send the User automatically, before it shows any error message whatsoever, to a NEW non-HTML5 javascriptless plain webpage.
What can I do?

Your else statement returns an object with one property (called playclip) which is a function that throws an error. If you'd like to redirect the user to another page instead, simply do a redirect instead of throwing an error:
else {
return {
playclip: function() {
// it might be nice to tell a user why they're being redirected:
alert('You are being redirected to another page because your browser does not support HTML5 audio!');
window.location.href = 'whateverPageYouWant.html';
}
};
}

you could do
window.location.href = "myhtml.html";
to direct to a new site immediately instead of the line "return..."

the simplest thing to do is change the location to another url.
else {
window.location = 'http://newnonhtml5webpage/';
}

Related

Javascript function will not execute using Cookies

I made a javascript function and I am trying to execute it in the javascript area. However, it will not run. When I run the code it just does nothing. I am using Github, so if you want my full code, go to https://github.com/TheNumnut/Wars-of-Shares/blob/master/Login/index.html
I am trying to make a Login page for a game. I would rather use forms than prompts but I have not been able to do that. If somebody could tell me how to use forms I will greatly appreciate it.
This is my code:
function checkCookie(checkusername, checkpassword) {
if (getCookie("username") != "") {
setCookie("username", checkusername, 365);
setCookie("password", checkpassword, 365);
}
else {
if (checkusername != getCookie("username") {
alert("Username wrong");
}
else {
if (checkpassword != getCookie("password") {
alert("Password wrong");
}
}
}
window.open("https://thenumnut.github.io/Wars-of-Shares/", "_self");
}
checkCookie(prompt("Username"), prompt("Password: ");
Please have a look at my other code in Github, because it also has not been working. Especially the profile page. None of the clickable text and links have been working. The link to the Profile Page is https://github.com/TheNumnut/Wars-of-Shares/blob/master/Profile/index.html
Your JS code has syntax errors.
You're missing an extra ) in the 7th, 11th and 42th line.
You can press F12 on your browser and check the console tab, where javascript errors are displayed.
However, I need to agree with the other users that this login method is not a good practice and it's very easy to bypass.
JavaScript source is available to the user of any website. Since the JavaScript runs in the user's browser, the code has to be transferred to the user's browser so the browser knows what to do. This means I as the user can view the source. In this case, by viewing the source I can see the line:
window.open("https://thenumnut.github.io/Wars-of-Shares/", "_self");
So I can bypass your log in page just by looking at the page source and going straight to https://thenumnut.github.io/Wars-of-Shares/

Javascript get updated link in real time

I'm new to javascript and I've created a kinda successful extension on chrome for dubtrack I've been trying to figure out for quite awhile how to make my injected script run in real time and grab the latest youtube music video url any help would be much appreciated my extension is very basic and it's not for profit I just made it to play around with javascript and jquery.
Here's the section of code that I'd like to have function in real time.
$('#grab').click(function() {
function getId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
return 'error';
}
}
src = $('iframe').attr('src');
setInterval(function() {
src = $('iframe').attr('src');
}, 10000);
window.open('http://youtubeinmp3.com/fetch/?video=http://www.youtube.com/watch?v=' + getId(src), '_blank');
});
Relevant links
GitHub
Chrome Extension
Thank you for taking the time to read my question.
You're bad at explaining (and might want to edit the question to reflect what you want), but basically the problem is this:
You have a YouTube embed in the page, with a particular video ID in src.
When the video changes, that happens without updating the src (by using YT embed API).
Therefore, if you try to grab just the src, it's not the latest video but the first you loaded.
As an extension, I see two ways of trying to solve it:
You could try to initialize the YT API yourself to get a player reference. I don't know if it will break the code of Dubtrack.
You could inject a script in the iframe as well that would somehow extract the video being played in a way other than relying on src.
It's an open problem how to solve it, and the fact that you're basically providing "just" a bookmarklet may be an obstacle.

Text to speech using javascript and translate_tts

I have been trying to get my webpage to play up what it says in a text box when the user click on a link, but so far I haven't manage. I have tried with
function listen(){
var sound = new Audio();
sound.src = "http://translate.google.com/translate_tts?ie=UTF-8&tl=sv&q=Testar";
sound.play();
alert(":D");
return false;
}
and
function listen(){
var sound = document.createElement("audio");
sound.setAttribute("src","http://translate.google.com/translate_tts?tl=sv&q=Testar");
sound.load();
sound.play();
alert(":D");
return false;
}
I have tried adding ie=UTF-8 to the link, and tried both with and without sound.play(); but nothing have worked. I get smiley face from the alert so I know the function runs. Can someone please help me get this to work.
EDIT: I did a work around by using and iframe which I hide by using display: none; and then simply using javascript to change the src, not the best solution but it works... for now.
This is an easy way to do it :
var sound = new Audio("http://translate.google.com/translate_tts?tl=sv&q=Testar");
sound.play();
Now it's a bit more complicated, but still possible:
you need set up an user-agent string like a common browser and, more difficult, you also must provide a token into the GET request.
Some people managed to extract the token algorithm from the js code of the page, but it's quite a long work and at any time the algorithm changes you need to start again the reverse engineering of the cryptic code.
So it's much easier access to a particular url from the same site that generates an XHR that shows the token you need.
A simple script with phantomjs and grep will do the job for you, details here:
https://stackoverflow.com/a/37221340/6332793

Suppressing HTMLImageElement onerror [duplicate]

This question already has an answer here:
Check if file exists but prevent 404 error in console from showing up [duplicate]
(1 answer)
Closed 8 years ago.
I'm running a script that is dynamically loading images depending on a few criteria. The script does not know beforehand whether a specific image source actually exists and will thus need to check before displaying the image. I do this by replacing the onerror handler on the element with a function that attempts to gracefully handle the event.
At first glance this works rather well, however even though I have replaced the event, the browser still audits 404 errors in the console which I don't want. Even worse is that IE displays the infamous JS error icon in the status bar which I find rather awkward.
I've tried to summarise the problem in a JSFiddle.
var img = new Image();
img.onerror = function (ev) {
alert("This does not exist!");
return true;
}
img.onload = function (ev) {
document.body.appendChild(this);
}
img.src = "foo.png"; //Missing image
Basically, I want to suppress all error reporting for this element such that the console doesn't get flooded with superfluous error output.
I know that I could solve this by prefetching and evaluating the HTTP headers with AJAX and server side scripting, which while technically a possible solution, is something I would prefer to avoid. However, while I only use standard JS in my example, JQuery code is also acceptable.
I have tried reading up on the event specification, but since web scripting is still the mess of confusing ECMAScript, HTML DOM, client, pixy dust and now HTML5 definitions that we all love to hate, it really didn't make me any wiser. The closest I got was Mozilla's documentation (that interestingly doesn't even state the correct function parameters) which suggested that letting the event return true would suppress errors, but that didn't really work.
I believe you can not check if image link is broken/does not exist without getting 404 error. Which is actually is information about link is broken.
You mentioned that other way is ajax to check existance...
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status != 404;
}
UrlExists('img_url');
but still you will get 404 in console.

Chrome fails to redirect URL when told to via javascript

function test(){
alert("This message should show");
window.location.href = "http://www.google.com";
alert("This message should NOT show");
}
<href="#" onClick=test()>Click Me</a>
Step through using Firefox(v8): The second message does NOT show.
Step through using chrome (v15, v16): BOTH alerts show.
Chrome blows past the redirect and continues through the rest of the call stack (in this case, it finishes the onClick) before redirecting.
No JavaScript Errors.
All extensions disabled.
I'm using a blank html file with no external files loaded.
Does anyone know of a way to get chrome to execute the window.location change immediately?
Pretty sure the specs give you no guarantees for this one, so I'm not too surprised. The obvious solution would be to throw an exception right after. Assuming you don't have catch blocks littered around your code, that ought to work:
throw "Aborting, redirecting you.";
(Yes, it's ugly. Sorry!)
Edit: fiddles: without throw, with throw
You could add a return
function test(){
alert("This message should show");
window.location.href = "http://www.google.com";
return;
alert("This message should NOT show");
}
There is a better way to do this.
function test(){
alert("This message should show");
return true;
alert("This message should NOT show");
}
<href="http://www.google.com" onClick="return test()">Click Me</a>
Optionally, you can use a confirm to control whether or not this action can be performed on click. Blame Google for trying to mess with functional standards, no other browser forces you to do this.
I was just trying the same thing: redirect using JS. In the PHP script I have, if a certain condition is true, I just end the script with a die function, echoing a script tag with the redirect code:
die("<script type='text/javascript' charset='utf-8'>\n".
"window.location.href='http://'+window.location.hostname+'/newdir/newfile.html';\n".
"</script>\n");
This was not working and I tried to execute the code from the console and it works from there. I assumed it was something about timing, so I added a setTimeout to the redirect:
die("<script type='text/javascript' charset='utf-8'>\n".
"var configURL = 'http://'+window.location.hostname+'/newdir/newfile.html';\n".
"setTimeout('window.location.href = configURL', 500);\n".
"</script>\n");
This patch works for now but I think there should be a better way to do it.

Categories

Resources