I'm using Vanilla Javascript,
I have two pages, page01.html and page02.html these pages share the same navigation system.
I want to load a parameter into the url of page01, and after I click page02 on navigation, page02 will load with the parameter within its URL.
example:
I'm on page01.html
I load a param into the URL, so now I have page01.html/?param=X
I click the menu item page02
I want to load page02.html/?param=X
Is there any way to do this without using localStorage and sessionStorage?
Here's a simple solution using vanilla JavaScript:
Page01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Page 1</div>
go to page 2
<script>
var linkToPage2 = document.querySelector("a[href='page02.html']");
linkToPage2.addEventListener("click", function(e){
e.preventDefault();
if(location.search){
window.location.href = "page02.html" + location.search;
}
});
</script>
</body>
</html>
Page02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Page 2</div>
go to page 1
<script>
var linkToPage1 = document.querySelector("a[href='page01.html']");
linkToPage1.addEventListener("click", function(e){
e.preventDefault();
if(location.search){
window.location.href = "page01.html" + location.search;
}
});
</script>
</body>
</html>
I used both Bergi's comment and Henry's answer to create my own version.
Basically I just created a onclick="menuClick();" and an id="menuLink" on the a tag.
Then on the Javascript I just added the location.search to the href:
menuClick = function() {
document.getElementById('menuLink').href += location.search
}
Related
I'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
I scraped a web page with the price of bitcoin and have the complete web page code stored in a variable. How do I extract the span:
<span class="text-large2" data-currency-value>8128.61</span>
from the whole code? By the way the number 8128.61 changes every time the page is refreshed as the price is updated
Here is my full code:
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('https://coinmarketcap.com/currencies/bitcoin/') + '&callback=?', function(data){
console.log(data.contents);
});
body {
background-color: lightblue;
}
<!DOCTYPE html>
<html>
<body>
<html lang="en">
<head>
<title>Web Scraper</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
</body>
you can use something like below to extract the value
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('https://coinmarketcap.com/currencies/bitcoin/') + '&callback=?', function(data){
console.log($(data.contents).find('span[data-currency-value]').html());
});
you can do this without Jquery also
var htmlData = `your html`;
var divNode = document.createElement("div");
divNode.innerHTML = html;
after this you can access all HTML element which is inside htmlData
like
divNode.getElementsByClassName("test")
New tab works good, but for some reasons current page haven't redirect (window.location from changeLocation() doesn't work)
function changeLocation() call success everytime when I click button, but location doesn't change.
Basically it seems like window.location doesn't work because of form submit (although I use target="_blank"). But if I add return false after window.location to function, I'm not able to submit form after changing location (because I'm already on another page) and also submit before changing location impossible.
Is this possible to make it works somehow? Thanks.
function changeLocation (){
window.location = "http://bing.com";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
</head>
<body>
<form action="https://google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
This code works for firefox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
<script type="text/javascript">
function changeLocation (){
window.location = "http://bing.com";
}
</script>
</head>
<body>
<form action="https://google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
google.com is being loaded in the new tab and the current tab us being loaded with bing.com
To solve it, you need to add setTimeout to function like this.
function changeLocation (){
setTimeout(function(){
window.location = "http://bing.com";
},200);
}
No ideas why, but it works perfect.
Dim returnUrl = Request.UrlReferrer.ToString()
Response.Write("<script> setTimeout(function(){window.location = """ + returnUrl + """;},200);window.open (""" + loginurl + """,'_blank');</script>")
I'm messing around with JavaScript and I want to have a coloured square with 3 links and depending on the link I click, the square will change colours. I can't get it to work and I'm not sure where I went wrong..
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
switch.js
var switch = (function() {
var red = document.body.getElementById('red');
var square = document.body.getElementById('square');
red.onclick = function() {
square.src = 'img/red.png';
}
})();
You're running your code before the elements exist.
Move the <script> element to the bottom of the <body> (so that it runs after they exist), or run the code in the load event.
You have two issues.
First you are using a variable called switch, that is a no no. Switch is a reserved word because it is a switch statement. Rename it.
var xswitch = (function() {
Second, It is because you are runnnig the code before the element exists on the page. It needs to be executed onload, document dom loaded [ready], or the script needs to be added at the bottom of the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
<script src="switch.js" type='text/javascript'></script>
</body>
</html>
Make the following changes in order to ensure that the DOM has loaded.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
<script type="text/javascript">
window.onload = function () {
switchFn();
};
</script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
JavaScript (switch.js)
var switchFn = function () {
var red = document.getElementById('red');
var square = document.getElementById('square');
red.onclick = function () {
square.src = 'img/red.png';
}
};
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>