I have a socket.io server that works, and that returns a number from 1 to 10 every second, that's the content of message.
But when I want to do dynamic content, it does not work, and the div#para stays on connection ...
This does not come from the exchange of data, since when I replace the line Document.get ... with alert (message), it works perfectly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Socket.io</title>
</head>
<body>
<h1>Communication avec socket.io !</h1>
<div id='para'>Connection..</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8080');
socket.on('message', function(message) {
Document.getElementById('para').innerHTML = message;
})
</script>
</body>
</html>
Document should be document where you are setting the innerHTML property.
Why
Document is a constructor.
document is a global object.
The method getElementById() is only available on the global document object. As stated here.
Related
I'm having an issue where I'm trying to set a page's redirect destination to a URL from a JS function.
I've tried calling the function by using <meta http-equiv="refresh" in the header, but I either have the syntax wrong or <meta> simply doesn't allow for calling functions. I'm honestly not sure.
<head>
<script src="extFile.js"></script>
<meta http-equiv="refresh" content="1; go2();" id="levP" name="levP">
<title>SO Question</title>
</head>
go2() is a function from extFile.js which contains an if/then statement that provides different URLs depending on time of day. I'd like to have index.html redirect users via function go2() either by a method in the header or in the body.
If this should be handled in the body then I'd appreciate any feedback as to how that should look.
Like this? this code will redirect your page after 5 seconds
<head>
<script src="extFile.js"></script>
<script>
setTimeout(function (){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}, 5000);
</script>
<title>SO Question</title>
</head>
if you want a to call a function do this:
<head>
<script src="extFile.js"></script>
<script>
var check = function(){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}
check();
</script>
<title>SO Question</title>
</head>
There are two pages in my tomcat server.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="onBtnClick()">jump to child</button>
<script>
const msg = {
name:'index.html',
ifor:'I am your parent!'
};
function onBtnClick() {
const childWindow = window.open('./child.html');
childWindow.msg = msg
}
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="msg-panel"></div>
<script>
const msgPanel = document.querySelector('#msg-panel');
msgPanel.innerHTML = `<span>${msg.name}</span><br><span>${msg.ifor}</span>`
console.log(window.msg);
</script>
</body>
</html>
I want to pass some message( the msg Object in index.html) from index.html to child.html, by the way above.
When I click the button in index.html to open the child.html, sometimes I can get the msg object in child.html, but sometimes I can't.
make the button type="button"
you set the message after opening. Sometimes the computer will be faster and not pass the message before it is shown. Use a timeout to show the message in the child OR
store the message in sessionStorage before calling window.open OR
have the child read the message from the parent:
const msgPanel = document.querySelector('#msg-panel');
msgPanel.innerHTML = `<span>${opener.msg.name}</span><br><span>${opener.msg.ifor}</span>`
console.log(window.msg);
Because you sometimes get that message and sometimes not try to put code from script from index.html in this:
document.addEventListener("DOMContentLoaded", function(event) {
//your code...
}
I think your html is not loaded and you click the button too fast.
Although this is already solved. Another alternative for sending data to a child would be localstorage. Getting and setting is really easy and IE11 is also supported.
localStorage.setItem('msg', 'something important');
let msg = localStorage.getItem('msg');
With that you would also have the ability to send data back and forth by setting event listeners on the localstorage change event like
window.addEventListener('storage', function(e) {
//do some cool stuff here
}
Just in case you want to have a more complex exchange between parent and child.
I am having trouble sending information of a session cookie when loading a page.
Here is how the function executes
<body onload="example();">
Here is the function it self
function example() {
websocket.send("<?php print($_SESSION['example']) ?>")
}
I've tried this way as well, but still does not work.
function example() {
websocket.send("Test")
}
I also tried calling this function when a button is clicked and it does work.
I was thinking maybe the connection to the websocket is not fast enough and the example(); function is called before the connection is established. Please let me know how I can make this work.
This a complete example of how to connect to a WebSocket from the onload document event:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WebSocket Sample</title>
<script type="text/javascript">
function example()
{
// open websocket
var socket = new WebSocket('ws://localhost:80');
socket.onopen = function() {
console.log("onopen!");
// Web Socket is connected. send an initial random message.
socket.send("Hello!");
};
}
</script>
</head>
<body onload="example();">
<h1>Title</h1>
</body>
</html>
I found out that the connection stablish after the execution of the function so what I simply did was setTimeout, even duh its not a good practice, it will be enough for the project am doing. Here is short version of my solution.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script language="javascript" type="text/javascript">
function example() {
function sendUser() {
setTimeout(
function() {
websocket.send("Wroked!")
}, 1000);
}
}
</script>
</HEAD>
<BODY onload="example();">
</BODY>
</HTML>
I'm trying to use AnyOrigin to load a url into my iframe:
Problem: It loads an empty frame, what am I doing wrong?
Code:
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta charset="utf-8">
<script type="text/javascript">
$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
$('#output').html(data.contents);
});
</script>
</head>
<body>
<iframe id="output"></iframe>
</body>
</html>
Anyorigin uses JSONP, so you don't load it using an AJAX call. Instead, the callback query parameter should be a function name, and you should load it like a regular script tag:
<script src="http://anyorigin.com/get?url=google.com&callback=myCallbackFunction"></script>
When the script is loaded, it will automatically execute a function with the name that you specified in the callback query parameter. Of course, for it to work you need a function defined like so:
<script>
function myCallbackFunction(myData) {
//myData.contents has your html, do something here
}
</script>
Please note that the function must be defined before the script, so either the script needs to be embedded dynamically or you need to define the function before the script.
There are a few tricky parts, such as how you were populating the iframe, and how the function callback needs to be declared, so I've included a full example here:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myCallbackFunction(myData) {
$(function() {
$("#test").contents().find('html').html(myData.contents);
});
}
</script>
<script src="http://anyorigin.com/get?url=http://google.com/&callback=myCallbackFunction"></script>
</head>
<body>
</body>
<iframe id='test' style='width: 100%; height: 100%'>
</html>
Note that I've wrapped the call to updating the iframe's contents in a jquery document onload event. If that's not done, then the call will attempt to populate the iframe before it exists, and will silently fail.
I have the following two HTML Documents:
Main.html
<html lang="eng">
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
var ExamId = "001A";
function open_exam()
{
window.open("exam.html")
}
</script>
</head>
<body>
<input type=button value="Open Exam" onclick="open_exam()">
</body>
</html>
Exam.html
<html lang="eng">
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function setParentInfo()
{
window.parent.document.ExamID = '001B';
}
</script>
</head>
<body>
<p>Welcome to the Exam!</p>
<input type=button value="Set Parent Info" onclick="setParentInfo()">
</body>
</html>
Main.html brings up Exam.html via the input button. From inside Exam.html I would like to change the variable ExamID on the parent document (i.e.: Main.html). I'm trying to do this via the JavaScript function: setParentInfo().
The above code is not working. Can someone help me come up with the correct code?
Thanks So Much!
Variables are assigned on the window object, not the document object.
Since the value is already set, you can instead read the existing value to verify it:
alert(window.parent.ExamId); // == "001A"
Variable is declared and assigned in parent window so you get reference from your child window.
you can test using alert statement:
alert(window.parent.document.ExamId);
//output::001B