Browser Notification works on webserver but doesn't on local machine - javascript

i develop on my local desktop machine with brackets. I currently try something with browser notifications. The strange thing is, that this code:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<button id="btn_not">Click me to get notified</button>
<script type="text/javascript">
$(document).ready(function () {
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
$("#btn_not").click(function () {
createNotification();
})
})
function createNotification() {
var notification = new Notification("Hi there!");
}
</script>
</body>
</html>
doesn't work on my local machine but it does work perfectly if I upload it to my webserver, but I don't understand why?

Related

I've this error "Could not establish connection. Receiving end does not exist" when I run ajax to load another file

I started to learn Ajax and this was the basic example to run ajax so what should I do when I face these "Unchecked runtime.lastError" errors ?
I tried Chrome extension wappalyzer but same problem and I am using xampp server.
<!DOCTYPE html>
<html>
<head>
<title>Hello Ajax</title>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readystate == 4)
{
document.getElementById("ajax").innerHTML = xhr.responseText;
}
};
xhr.open('GET','content.html', true);
function sendajax() {
xhr.send();
}
</script>
</head>
<body>
<h3>Welcome to Ajax</h3>
<button onclick="sendajax();">Click Me!</button>
<div id="ajax"></div>
</body>
</html>
The same code worked in course that I'm studying and I believe the problem in my browser or server i do not know.

I cannot send a message from my client using websocket to local server

I'm working on webstorm exactly a PhoneGap project and websocket and I cannot send a message from my client using websocket to local server. Thank you for your help.
<!--
Lincense: Public Domain
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample of web_socket.js</title>
<script src="js/websocket.js"></script>
<!-- Include these three JS files: -->
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("WebSocket is supported by your Browser!");
// Let us open a web socket
var ws = new WebSocket("ws://localhost:9777");
ws.onopen = function()
{
// Web Socket is connected, send data using send()
ws.send("message");
alert("Message is sent...");
};
ws.onmessage = function (evt)
{
alert("Message is received...");
};
ws.onclose = function()
{
// websocket is closed.
alert("Connection is closed...");
};
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
</script>
</head>
<body>
<div id="sse">
Run WebSocket
</div>
</body></html>
I have been working on this problem for 2 days any help please!

get localstorage item in a iframe

I have a file index.html with one iframe set and iframe source points to another domain. I am setting localstorage in index.html and trying to get the value in iframe source.(sample.html)
File 1
index.html
<html>
<head>
//js file
</head>
<body>
setting localstorage
Iframe src="55.10.45.045/sample.html"
</body>
</html>
file 2
sample.html
<html>
<head>
//js file
</head>
<body>
getting localstorage Item //Returns null
</body>
</html
You want to use something like this.
Sending information:
window.onload = function() {
var win = document.getElementById('iFrameId').contentWindow;
win.postMessage(JSON.stringify({
key: 'dataKey',
data: dataPassing
}), "*");
};
Receiving information:
window.onmessage = function(e) {
var payload = JSON.parse(e.data);
localStorage.setItem(payload.key, payload.data);
};
This will pass a JSON object into the iFrame, then the script in the frame will take it and push it into local storage.
Use like this...
index.html
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
click
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("link", "http://www.w3schools.com/");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("link");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>
sample.html
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
document.getElementById("result").innerHTML = "<iframe src='"+localStorage.getItem("link")+"' width='100%' height='350px' />";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>

Posible SoundManager 2 to play local sound?

I am create a music library on Localhost and is it possible to use SoundManager 2play a local sound file with path, ex: D:/Music/file.mp3.
<
!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
play
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript">
$('#play').click(function(e){
e.preventDefault()
soundManager.setup({
url: '/js/',
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'path/to/file.mp3'
});
mySound.play();
},
ontimeout: function() {
// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
}
});
})
</script>
</body>
</html>

XMPP - Example chapter 3 "Professional XMPP Programming with JavaScript and jQuery" doens't work

I am just new to XMPP, and I am making the first "HELLO" code. Please take your time look at the following code (the .zip is at the end of this topic):
<html>
<head>
<title>Hello - Chapter 3</title>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
text-align: center;
}
.hidden {
display: none;
}
#log {
padding: 10px;
}
</style>
<script language="javascript" type="text/javascript" src="scripts/jQuery.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jQueryUI.js"></script>
<script language="javascript" type="text/javascript" src="scripts/strophe.js"></script>
<script language="javascript" type="text/javascript" src="scripts/flXHR.js"></script>
<script language="javascript" type="text/javascript" src="scripts/strophe.flxhr.js"></script>
<link rel="stylesheet" href="hello.css"></link>
<script language="javascript" type="text/javascript">
var Hello = {
connection: null,
log: function(msg) {
$("#log").append("<p>" + msg + "</p>");
}
};
$(document).ready(function() {
$("#login_dialog").dialog({
autoOpen: true,
draggable: false,
modal: true,
title: "Connect to XMPP",
buttons: {
"Connect": function() {
$(document).trigger("connect", {
jid: $("#jid").val(),
password: $("#password").val()
});
$("#password").val("");
$(this).dialog("close");
}
}
});
$(document).bind("connect", function(ev, data) {
var conn = new Strophe.Connection("http://bosh.metajack.im:5280/xmpp-httpbind");
conn.connect(data.jid, data.password, function(status) {
if (status === Strophe.Status.CONNECTED) {
$(document).trigger("connected");
} else if (status === Strophe.Status.DISCONNECTED) {
$(document).trigger("disconnected");
}
});
Hello.connection = conn;
});
$(document).bind("connected", function() {
// Inform the user
Hello.log("Connection established");
});
$(document).bind("disconnected", function() {
Hello.log("Connection terminated.");
// Remove dead connection object
Hello.connection = null;
});
});
</script>
</head>
<body>
<h1>Hello</h1>
<div id="log"></div>
<!-- Login dialog -->
<div id="login_dialog" class="hidden">
<label>JID:</label><input type="text" id="jid">
<label>Pwd:</label><input type="password" id="password">
</div>
</body>
</html>
According to the document, and the code, it must either say "Connection establised" or "Connection terminated". But it doesn't. I tried to put alert("It runs to here!"); in every line of the code, and it still alert(). It doesn't alert anymore when I put it in bind("connected") and bind("disconnect"). So I guess the code can not run to there. I've never done it before, and there is rarely documents about this, so I don't know what to do now.
Question: Could you guys please take a look at it, and tell me what was wrong? I myself is still working on debugging it!
Extra information: These are what is in my web folder (I am afraid of missing javascript framework files). All js files are latest version.
index.html
scripts/
jQuery.js
jQueryUI.js
strophe.js
flensed.js
flXHR.js
flXHR.swf
flXHR.vbs
swfobject.js
updateplayer.swf
checkplayer.js
css/
Not important...
Here are my code, please take time to view it: http://xx3004.kodingen.com/XMPP
I would appreciate any view of help.
[x]
your code is alright,
the problem is in the URL provided to make the connection using Strophe.
var conn = new Strophe.Connection("http://bosh.metajack.im:5280/xmpp-httpbind");
Try to find the location of the server, otherwise install an xmpp server(vysper), locally on your machine, and change the URL as http://localhost:8080/bosh/
Also try to comment the flxhr inclusion.
If you are running Openfire on your localhost make sure
bosh_service_url = 'http://127.0.0.1:7070/http-bind/'
ie
var conn = new Strophe.Connection("http://127.0.0.1:7070/http-bind/");
And if you are running ejabberd on your localhost make sure
bosh_service_url = "http://127.0.0.1:5222/http-bind/"

Categories