I have a code that covers the whole content with a link (target= _blank), then turns that link's display into none, brings another link and so on.
In my browser everything works just fine but I got a complaint about how only 2 of these links work.
No matter which link they click, after the second one it doesn't work.
Did the same thing with addEventListener and onclick but they caused different problems so therefore I used "a href".
I only can use JavaScript to create these elements and unable to use plain HTML.
I searched about browser's behaviors on multiple new tab or window but couldn't find anything useful.
This is how I create the links:
var hidden= document.createElement("a");
hidden.href="somelink";
hidden.style.height="100%";
hidden.style.width="100%";
hidden.target="_blank";
hidden.style.display="none";
container.appendChild(hidden);
And to make them appear, I add an event listener to a video and make them appear and disappear the right time.
video.addEventListener("timeupdate",function () {
if(video.currentTime>=3 && video.currentTime<5){
hidden.style.display="block";
} else if(video.currentTime>=5 && video.currentTime<6) {
hidden.style.display="none";
}
}
Is it a browser behavior that blocks the multiple new tabs or should I look for the answer in something else in my code?
Related
I have searched a lot of information about this but have not found the solution yet.
My problem is the following, I am creating an extension to speed up the movement through several web pages, I have managed it with many of them, but I have come to some where I cannot simulate a click with Javascript and I don't know how to do it.
One of the pages is this: https://sports.betway.es/es/sports/in-play The page is in Spanish domain, therefore I do not know if they can access it from another country (without vpn), although I think that with domain ".com" it works.
The code is as follows, it's pretty simple.
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelectorItemButton")
for(let i=0;i<deportesActivos.length;i++){
let nombre = deportesActivos[i].lastChild.firstChild.innerText
if(nombre == data.deporte){
deportesActivos[i].click()
}
}
deportesActivos I collect the DIV elements with that class from the page.
deportesActivos[i].lastChild.firstChild.innerText I extract the text of each element
if(nombre == data.deporte){
deportesActivos[i].click()
}
When it matches, click to enter the link.
The problem is that the click does not simulate me.
I have bought exactly the element that you click on, I have clicked manually and it works, I have tried to click on other elements of the web page and it does not work, I have tried to give a "listener on click" to the element and it does not work either.
The HTML of the page is as follows:Image with HTML Code of the website
I don't know if this helps but on website build with Ionic app neither works
The click event does not fully simulate a user click. It just fires the onClick handler on the element that you are targeting (and any parents).
If your are just redirecting to a new URL when the button is clicked, you could just do that in your loop instead.
// get the links, not the buttons
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelector");
for (let i=0; i < deportesActivos.length; i++) {
// Drill down one extralevel to get the button text
let nombre = deportesActivos[i].firstChild.lastChild.firstChild.innerText;
if (nombre === data.deporte) {
// Redirect to the href in the link
window.location.href = deportesActivos[i].href;
}
}
I want to open some relevant links after a button click by user. All these links have to open in a new tab.
I tried using the following code but it does not open the links:
$("div.relevant-links").on('click', function() {
var count = 0;
var relevant_links = $(this);
function open_link() {
if (count < relevant_links.siblings("a.sections").length) {
relevant_links.siblings("a.sections").eq(count).css({
background: 'yellowgreen'
});
relevant_links.siblings("a.sections").eq(count).click();
count++;
} else {
clearInterval(link_interval);
}
}
open_link();
var link_interval = setInterval(open_link, 5000);
});
All other code works fine because I can see the background color of the link change. However, the click() method does not seem to work.
How can I trigger the click on different links? All the links have to open in a new tab. I have set their target attributes to _blank.
First of all, remove the interval, if you're going recursive, use setTimeout, if there's even a minor flaw in your code you've got yourself an annoying memory leak.
Second, when you want to open a webpage, new tab or not. You'll need to do it right after a user initiated action like a click. If you're gonna trigger it again after 5 seconds it will get blocked in modern browsers.
Third, you could also retrieve the href of the links and perform a window.open('your href here', '_blank') instead of triggering the click event.
Last, don't open a bunch of "relevant" links. You're not making anyone happy with that. Especially not a new one every 5 seconds!
I'm trying to change the size of a pop-up and give it the same width than the screen, sent from an iframe.
var screen_width = parent.screen.width;
Then I got the html:
<a href="#" onClick="window.open('https://www.google.com','popup', 'width='"+screen_width+"',height=400px')">
I've tryed all possible convinations with the ' " or whatever I know, but I think it should work lie this.
Sorry if it's obvious, my coding skills are not so developed, but I think, it's possible, html it's loading before javascript?
P.D.: One more thing, I want to use a variable, because I want to change a bit the real size of the screen.
One problem you might be having is that in your window.open() options, you shouldn't specify px... just put the number for your height.
In any case, here's a better implementation of what you're trying to do. In your HTML:
<a href="http://example.com" target="_blank" data-fullpopup>Click me!</a>
This way, your link will work, and will even open in a new tab/window if your JavaScript doesn't run for some reason. This is a good fallback. The key here is the data-fullpopup attribute, which we'll look for in your JavaScript:
document.addEventListener('DOMContentLoaded', (e) => {
document.querySelector('body').addEventListener('click', (e) => {
if (!e.target.matches('a[data-fullpopup]')) {
return;
}
window.open(e.target.href, 'popup', 'width=' + window.screen.width + ',height=400');
e.preventDefault();
});
});
Basically, we wait for the document to fully load so that we can attach a click handler to the body element. (Note: If you're only doing this for a couple links, it's better to attach the click handler directly to them. I'm attaching it to body here, assuming that you'll have a lot of these sorts of links... it's more efficient to have one click handler in those cases. Remember though that then this click handler has to run for every click for any element on the page. Choose your tradeoff for your use case.)
Once the link is clicked, we confirm that it's a link with our data-fullpopup attribute. If it is, we treat it like a full-width popup. We get the target (the element) href on the fly, as well as the current screen width. Finally, we prevent the default action so that it also doesn't navigate to the page on its own.
https://jsfiddle.net/L5p0xk98/3/
As mentioned in the comments, you can do this without setting a variable first:
Click Me
So I recently started working on Greasemonkey scripts without much prior experience in JavaScript. It was going fine until I hit this roadbloack.
I'm writing a script for a page that has a small table of information. If a link at the bottom is clicked, the table expands fully in the page to display all information. I need to call a function in Greasemonkey when this happens, however, the link doesn't appear to have an ID or anything I can actually reference to watch it. It's simply this:
When it's clicked, the table expands and it then shows as true. I initially used the following to expand the table upon loading the page, but that broke several things:
window.location.href = ('javascript: expandFullTable(false)');
I've attempted using "click", "onclick", and even "mouseover" to have Greasemonkey detect when it's pressed but nothing seems to work. From what I can tell it's simply a link that calls a function, but after some significant searching I wasn't able to find out anything about how to reference it in my script. I'm sure it's incredibly simple, but it's frustrated me to no end.
You can hijack the function like this:
var oldExpandFullTable = unsafeWindow.expandFullTable;
unsafeWindow.expandFullTable = function() {
// Do something
alert("You clicked on that thing!");
// Call the original function
oldExpandFullTable.apply(this, arguments);
};
But since you tagged this jquery this should let you retrieve the link:
var link = $("a[href^=\"javascript: expandFullTable\"]);
It should work if jQuery is injected into your script with #require. If it's already in the page, you can add this before to access it: var $ = unsafeWindow.jQuery;.
And by the way, perhaps you should learn more about unsafeWindow to avoid security holes.
First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});