How to store a url in a variable in javascript? - javascript

I'm trying this rough script idea. But it is not working.
<script>
function storeurl() {
var varurl = document.URL;
}
document.onclick = storeurl;
document.write(varurl);
</script>
varurl is set as the actual url using document.URL function.
with broogle
then on click i would like varurl to be set to #2 and then echo.
In a perfect world this script would echo
http://url/#2
when clicking on the link
Any help?
Thx

Your varurl variable is scoped at method (function) level. This means it is not visible to code which runs outside of the function.
Also, the document.write code will execute when the script first runs i.e. before the click (should the click ever happen).
If you don't need to use varurl other than to write it to the document you can move the document.write code into the function and retain the narrow scope of varurl:
<script>
function storeurl() {
var varurl = document.URL;
document.write(varurl);
}
document.onclick = storeurl;
</script>
Otherwise move the variable definition out of the function so that it (the variable) becomes a global:
<script>
var varurl;
function storeurl() {
varurl = document.URL;
document.write(varurl);
}
document.onclick = storeurl;
</script>

The var makes it a local variable to the function's scope. Plus you are trying to read it before it is even set.

You have made varurl location to the function it is declared in with var so it isn't visible from outside that function.
var varurl;
function storeurl() {
varurl = document.URL;
}
You are also writing its value immediately instead of doing so in the click event, so it won't have been set by the time you write().
function storeurl() {
var varurl = document.URL;
document.write(varurl);
}
document.onclick = storeurl;

It should work,
<script>
function storeurl() {
varurl = document.URL; // it should be Global variable, so remove var
document.write(varurl);//when you're declaring this outside of the function
}
document.onclick = storeurl;
</script>

change your code to
var varurl;
function storeurl() {
varurl = window.location.href;
}

For simply storing a URL in a variable, be it an external URL or the URL of the current page, and then either display it or do something else with it, you can follow what is shown in the code below:
<html>
<body>
<button onclick="go()">GO TO GOOGLE</button><br/>
<button onclick="show()">CLICK TO SHOW CURRENT URL</button><br/>
<p id="showhere"></p>
<script>
function go(){
var u = "http://www.google.com" ;
window.location.href = u; //takes you to google.com
}
function show(){
var x = window.location.href;
document.getElementById("showhere").innerHTML = x;
//shows URL of current page below the buttons
}
</script>
</body>
</html>

Related

Socket JS not works inside onload method

I have this js piece which I use for django channels:
var chatSocketSender1 = new WebSocket(
'ws://' + window.location.host + '/ws/my_socket1/'
)
function send() {
var msg = "some message"
var receiver_id = 111
window['chatSocketSender1'].send( JSON.stringify({
'msg': msg,
'receiver_id': receiver_id
}) )
}
document.querySelector('#send_button').onclick = function() {
send();
}
The problem is that this js code only works if I put that after latest element of HTML:
<head>
...
</head>
<body>
// whole html content here
<script>
// js piece here
</script>
</body>
But if I use jquery's on load method like:
<head>
<script>
$(window).on('load', function () {
// js piece here
});
</script>
</head>
<body>
// whole html content here
</body>
Then it gives: Uncaught TypeError: window[("chatSocketSender1")] is undefined
Any suggestion please, why this not works with "onload" ?
The reason your code doesn't work is because in your first code var chatSocketSender1 creates a "global" variable (that's defined at the window level) that you later reference as window("chatSocketSender1"), but in the second code, var chatSocketSender1 is scoped to the anonymous event handler function, so is not available as window("chatSocketSender1").
Put another way:
<script>
var x = 1;
function foo() {
console.log(x)
}
</script>
works fine, but
<script>
function foo() {
var x = 1;
}
foo();
console.log(x);
</script>
will give an undefined variable error as x only exists inside foo. This isn't exactly what you've done, but is essentially the same concept.
Now, if your code was:
chatSocketSender1.send(
then it would have worked fine as your variable chatSocketSender1 is defined within the function() { onload event callback.
or instead of
var chatSocketSender1 =
you could do
window.chatSocketSender1 =
to define the variable globally, or you could:
<script>
var chatSocketSender1 = new WebSocket(...
function send() { ... }
$(window).on('load', function () {
document.querySelector('#send_button').onclick = ...
as you generally only need the event binding within the onload.

how to open link in external window with click on anchor tag with javascript?

This is probably such a noob question, but I can't get it to work.
I want to open external window link by clicking on anchor tag, but I keep getting error that myFunction() is not defined.
Open link
js
$(document).ready(function() {
$('#searchEng').click(function() {
const engine = document.getElementById('engine');
var en_ = engine.val();
if (en_ == "firefox")
{
function myFunction() {
var url = "https://www.mozilla.org/en-US/firefox/new/";
window.open(url,'_blank');
};
}
});
));
Why is it undefined?
I have .js included because other stuff works.
you can remove function inside click function
$(document).ready(function(){
$('#searchEng').click(function() {
const engine = document.getElementById('engine');
var en_ = engine.val();
if (en_ == "firefox")
{
var url = "https://www.mozilla.org/en-US/firefox/new/";
window.open(url,'_blank');
}
});
Open link
You declared myFunction inside another function, which makes it a local variable of that function. Local variables aren't available outside the function where they were defined.

LocalStorage set property 'innerHTML' of null. Tried solution with window.onload

I have a javascript that tries to get the information from the localStorage. Either i haven't fully understood window.onload or something else is faulty.
Thanks in advance!
onClickJs.js
function onClickLight() {
alert("OnClick Log " + window.onload);
window.onload = function (){
var statusPub = document.getElementById("result").innerHTML = localStorage.getItem("statusPub");
console.log(statusPub);
}
index.jsp
<script>
function load() {
console.log("load event detected!");
}
window.onload = load;
</script>
<button type="lightButton" onclick="onClickLight()">Light</button>
By the time you click the button, the window load event has already fired. So assigning a function to window.onload at that point is useless, the function will never be called.
If you want to do the work that function is doing, just...do it:
function onClickLight() {
var statusPub = document.getElementById("result").innerHTML = localStorage.getItem("statusPub");
console.log(statusPub);
}

Refreshing page after function

Im using php + Jquery.
I want to reload my page at the end of "myFunction".
This is what i have currently:
<script>
function myFuntion(){
var x = prompt("Enter Value", "0"); //This prompts when calling myFunction()
$("#myDiv").load("config/calcX.php"); //This loads"config/calcX.php" in a Div;
location.reload(true); //Does not reload my page...
}
</script>
is there something wrong with myfunction?
There are several ways:
location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname;
location.replace(location.pathname)
location.reload(false)
You can try this
window.location.href = 'yourpage.com';

Javascript trigger function when iframe has loaded

I am creating an iFrame via an object instance, when the iFrame loads I need to trigger a method from the original object, and be able to retrieve the content of the iframe back in the object. At the moment "up" apparently does not exist.
function iFrame() {
var Id="1234";
var d = document.createElement('DIV');
d.innerHTML = '<iframe id="'Id+'" name="'+Id+'" onload="up('+Id+');"></iframe>';
document.body.appendChild(d);
obj=this;
var i = document.getElementById(this.frameId);
i.up = (function(obj){obj.iFrameOnload()})(obj);
}
iFrame.prototype.iFrameOnload=function(id) {
d = document.getElementById(id).contentWindow.document;
alert(d.body.innerHTML);
}
Instead of putting plain HTML inside of the div, you should actually create that iframe using DOM directly. This gives you several benefits:
var frame = document.createElement('iframe');
// set id and name attributes directly (although you don’t actually need them)
frame.id = '1234';
frame.name = '1234';
// set frame source (you probably want to set this)
frame.src = '';
// register event listener for the `load` event
frame.addEventListener('load', function () {
// event handler here
var d = this.contentWindow.document;
alert(d.body.innerHTML);
}, false);
document.body.appendChild(frame);
As you can see, there is no need to ask the DOM again to get the iframe element via an ID or something. You created it directly after all, so you already have a reference to it.
your code there is a little messed up. allow me suggest something else:
include jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
and then:
<script type="text/javascript">
$(function(){
// create the iframe
var url = 'http://www.google.com';
var iframe_html = '<iframe src="' + url + '" id="iframe"></iframe>';
$('body').append(iframe_html);
// bind load event
$('#iframe').load(function(){
// on load code here
});
});
</script>
hope that helps
You can create a global function up():
function up (iframe_element) {
alert("In up() function");
}
And call it with the 'this' parameter
d.innerHTML = '<iframe id="'Id+'" name="'+Id+'" onload="up(this);"></iframe>';
Full JS-code is in that case:
function up (iframe_element) {
alert("In up() function");
}
function iFrame() {
var Id="1234";
var d = document.createElement('DIV');
d.innerHTML = '<iframe id="'Id+'" name="'+Id+'" onload="up(this);"></iframe>';
document.body.appendChild(d);
}

Categories

Resources