Body onclick consecutive links - javascript

Hi I have this script that opens a new tab when clicking anywhere on the page but it works with only one link, I would like to make it so it can open links multiple times, consecutively. I would really appreciate any help.
<script type='text/javascript'>
var popup = function() {
window.open ("https://example.com/", "Window","status=1,toolbar=1,width=500,height=500,resizable=yes");
}
</script>
<body onclick='popup();'>
I tried multiples onclick in the body tag but it didn't work

If you want to cycle through multiple URLs, try this out.
<!DOCTYPE html>
<html>
<body onclick='popup();'>
<script>
const urls = ["https://www.google.com", "https://www.stackoverflow.com", "https://www.gmail.com"];
let counter = 0;
const popup = () => {
window.open(urls[counter++ % urls.length]);
}
</script>
</body>
</html>

Related

Automating Printing in JavaScript

I have a large number of links I want to print. The links are in local HTML files, so I am able to add scripts to them. I attempted a few things, but I did not get to the end. The best I have so-far achieved is to open the links I want to print in separate tabs, and the Windows.print() function does not work. Could someone help me to what I might be missing here, or point me to how I might get to my goal. Please see the code below:
<!doctype html>
<html>
<head>
<title>Print</title>
<script>
function pickLinks() {
const anchors = document.getElementsByTagName("a");
for (const a of anchors) {
const url = a.href;
const urlBase = "https://www.huffpost.com/entry/";
if (url.startsWith(urlBase)) {
console.log(getQid(url));
openInNewTab(url);
}
}
}
function getQid(url) {
const res = url.split("-");
return res[res.length - 1];
}
function openInNewTab(url) {
const win = window.open(url, '_blank');
win.print();
//win.focus();
}
</script>
</head>
<body>
<h1>Print</h1>
<button onclick="pickLinks()">PRINT</button>
Link
Link
Link
Link
</body>
</html>
Ideally I would like the print to be a PDF with a filename that reflects the URL, such as getQid(url) in the code above.
Many thanks in advance!

Can't load HTML into HTA file when click by link inside of the HTML

I have one HTA file, one JS file is enqueued to the HTA file and HTML files with contents are loaded into the HTA file.
For example this is my_hta_file.hta
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9.0" />
</head>
<body></body>
</html>
<script type="text/javascript" src="my_js_file.js"></script>
and this is my_js_file.js
function getFileContent(filePath) {
var fileStream = new ActiveXObject('ADODB.Stream');
fileStream.Type = 2;
fileStream.Charset = 'utf-8';
fileStream.Open();
fileStream.loadFromFile(filePath);
var fileContent = fileStream.ReadText();
fileStream.Close();
return fileContent;
}
// initial loading of home page
document.body.innerHTML = getFileContent('index.html');
var pageLinks = document.querySelectorAll('a');
for(i = 0; i < pageLinks.length; i++) {
var linkHref = pageLinks[i].getAttribute('href');
pageLinks[i].setAttribute('href','#!'+linkHref);
// I add this leading prefix to prevent following by the link when click by it
pageLinks[i].onclick = function() {
var page = this.getAttribute('href').substring(3);
if(page == '') {
var page = 'index';
}
// load HTML of the page by link path when click by the link
document.body.innerHTML = getFileContent(page+'.html');
}
}
and my HTML files with contents are:
index.html
Home
Second
Third
<div>Home page content</div>
second.html
Home
Second
Third
<div>Second page content</div>
third.html
Home
Second
Third
<div>Third page content</div>
When I click by a link, I need to load all the HTML content from the HTML file by the link path including the very links I click by.
If I open my HTA file and click the link "Second", I get the second page links and content successfully.
But after that if I click the link "Third", I get the error
Cannot find file 'file:///D:/third' ...
How to resolve the problem?
UPDATE 1
If I move my script to the bottom of the HTA body and add a div for loading HTML for example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9.0" />
</head>
<body>
<div id="body"></div>
<script type="text/javascript" src="my_js_file.js"></script>
</body>
</html>
and in my JS file load HTML into div i.e.
document.getElementById('body').innerHTML = ...
instead of
document.body.innerHTML = ...
the problem still remains
As said in the comments, all the links with attached event listeners are replaced by new elements when innerHTML is changed. These new links don't have the listeners which the old elements had.
The snippet below shows how you can use a function to reinit the listeners. The snippet assumes a content wrapper element is used (as you already seem to use it). I've also simplified the code a bit, and used more modern JS (since IE9 mode is used in the OP).
function getFileContent (filePath) {
// As it currently is
}
// Handles clicks on the links
function newContent (e) { // e contains information of the current event
var path = e.target.href || 'index',
body = document.getElementById('body');
e.preventDefault(); // Prevents the default action of the clicked link
body.innerHTML = getFileContent(path + '.html');
init(); // Initialize the new content
return;
}
// Initializes the page
function init() {
var links = document.querySelectorAll('a'),
i, ei;
for (i = 0, ei = links.length; i < ei; i++) {
links[i].addEventListener('click', newContent);
}
return;
}
// Initialize the first page
init();

Hide drop down list on conditional

I am simply trying to hide a select list/drop down list on an html page. I am not trying to hide the options in the select list, just the select list overall. I am having the hardest time for some unknown reason. I cannot figure out how to do this.
HTML
<HTML>
<head>
<title>Test</title>
<script type="text/javascript">
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.visibility="hidden";
}
</script
</head>
<body>
<select id="contracts" name ="contracts" style="width:99%;height:50px"></select>
</body>
</html>
As simpel as can be, yet I cannot figure out how to hide the select list. It's still present on my page. This example is actually hiding the values in my select list but not the overall select list. Does anyone know how to accomplish this? I am out of ideas. Thanks in advance for your help.
document.getElementById('contracts').style.display = 'none';
The above should do
You man consider using jQuery though. Makes your life simple
$('#contracts').hide();
That's all
Cheers
try and move the script to the bottom of the page. It's executing before the element is loaded. You could also put it in the "onload" function
window.onload = function(){
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.visibility="hidden";
}
};
Instead of visibility, you should be looking at display property. Check the snippet below.
<HTML>
<head>
<title>Test</title>
</head>
<body>
<select id="contracts" name ="contracts" style="width:99%;height:50px"></select>
</body>
<script type="text/javascript">
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.display="none";
}
</script
</html>

Random websites not display on iframe

This code is generating a random link from variable but that link is not opening in iframe I need to display random links in iframe whenever the button is clicked. How to do that?
<html>
<script>
var cat1 = [
"http://arborjs.org",
"http://cartodb.com",
"http://vis4.net/labs/185"
];
var myFrame = document.getElementById("frame");
getRandomUrl(myFrame);
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random()*cat1.length);
var url = cat1[index];
document.getElementById('frame').src = url;
}
btn.addEventListener("click", function() {
getRandomUrl(myFrame);
});
</script>
<body>
<button id="btn">Click</button>
<br>
<iframe id="frame" src="" style="width:500px; height: 500px"></iframe>
</body>
</html>
You have to put the script tag after all your HTML or wait for the window to load.
Also, you're calling a function before it's defined.
This code is generating a random link from variable
I don't think this is happening, if you open your console it should tell you the function and iframe are both undefined, as I stated above.

link on random image background

I have this code to have random background images, I need to make sure that when someone clicks on the picture to open a web page, one for each image. Can you help me please?
this is the code:
</head><body onLoad="LoadRandomBackground(); StartBackgroundRefreshTimer()">
</body>
</head>
<body onLoad="LoadRandomBackground()">
</body>
<script type="text/javascript">
var bgImages = [];
bgImages[1]="/img/sfondi/bg-stanem.jpg";
bgImages[2]="/img/sfondi/booking.jpg";
function LoadRandomBackground()
{
var randomImageIndex = Math.floor(Math.random()*bgImages.length)
document.body.background = bgImages[randomImageIndex];
}
function StartBackgroundRefreshTimer()
{
var timer = setInterval('LoadRandomBackground()',1000); // millisecondi
}
</script>
thank's
can someone help me?
you could create a second array ...
var bgImagesUrls=[];
then assign the urls to the array using the same indexes for the bgImages
you could then place in LoadRandomBackground
document.<someelement>.href=bgImagesUrls[randomImageIndex];
Here a short possible script http://jsfiddle.net/d2Dmh/3/
bgImages[0]= {url: ...
here you can place the url you want as destination as another parameter (destination : "url")
And with
window.location = "http://www.google.com/";
you can navigate to the new page in the document click function.
You need jquery for my example.

Categories