I'm working on a Chrome extension which injects a link into the page which upon click triggers a click on two links visible within the page. It works when I run the code from the console, but due to Chromes Isolated World handling of extensions, the click event fails to fire on the origin page links. Is there a way around this?
Code:
function foo(e) {
e.preventDefault();
$(this).parent().siblings('.myElement').children('a.first-link').click();
$(this).parent().siblings('.myElement').children('a.second-link').click();
}
$(document).on('mouseover', 'div.content', function() {
if($(this).find('ul').children('li').length === 0) {
var li = $('<li class="foo"></li>');
var a = $('Action');
a.on('click', foo);
li.append(a);
$(this).find('ul').children('.myElement').after(li);
}
});
Thanks for your help!
Related
I have an onberforeunload method which is correctly alerting the user when they are trying to close the tab or the browser using the follwoing code:
window.onbeforeunload = function(event) {
event.returnValue = 'Are you sure you want to leave/';
console.log(event.returnValue);
};
I have discovered that the onberforeunload is not being called when I click a hyperlink on the page. The warning message I want to display isn't appearing and the page is loading freely.
I have searched for many ways to create a popup for when a hyperlink has been selected but they all deal with one or groups of hyperlinks in div tags. I wish for a popup to display if any hyperlink is selected.
Why isn't onbeforeunload catching the exiting of the page through a hyperlink? Is my understanding of onbeforeunload wrong that it should be catching hyperlink exits?
UPDATE
I have updated the code to the following:
window.onbeforeunload = closeIT;
function closeIT() {
return 'here';
if(searchOnGoing){
return 'Ifs you leave the Youtube History page now the application will not finish';
}
};
It is still not working for hyperlinks and working for browser and tab closure. I am running this as part of a content script in a chrome extension which is injecting the content script into the page. Would this have an effect on it?
I also have an onunload following,i am wondering would this also have an effect on it?
window.onunload = function(event){
//Do something
}
Actually, it should trigger. Do you catch the event somehow via a click-event-listener? Anyway, you could show an alert with help of a click-event listener.
Following code-snippet is copied from a similar question: how to detect if a link was clicked when window.onbeforeunload is triggered?
Here the question was, in contrast, how to prevent the beforeunload event when links are clicked.
var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function() {
if(link_was_clicked) {
link_was_clicked = false;
return;
}
//other code here
}
The following snippet correctly uses onbeforeunload.
<body onbeforeunload="return myFunction()">
Click me!
<script>
function myFunction() {
return "Please don't go!\nThis works beautifully!";
}
</script>
I've a problem with the JavaFX Webview and Javascript. Within the Webview I try to load some html content dynamicaly into a div when the User clicks a button with an a href. Every time I do this within the Webview, it loads the refering page directly, without loading it into the div.
In Firefox, Chrome and with Apache Server it's working properly, so it's loaded into the div container.
Here's the code to load the various content:
$(document).ready(function()
{
$(".panel-body a").click(function stopDefault(event)
{ if (event && event.preventDefault) {
event.preventDefault();
var pageToLoad = $(this).attr("href");
$("#content").load(pageToLoad);
} else if (window.event && window.event.returnValue)
{ window.event.returnValue = false;
}
});
});
The script is with the if else already prepared for standard conform browsers and IE.
I also tried it (in the beginning) with return false; but this was also not working. So, the default action is not prevented / disabled. And I don't have any more idea why this is just not working in JavaFX Webview.
Thanks in advice!
I just updated to chrome version 32.0.1700.76 m and I am now noticing that hashchange seem to act weird. sometimes it work, sometimes it doesn't.
I have the following code on my homepage and I haven't changed the code in a few months. worked fine a few days ago(before I updated to latest chrome version):
$(window).on('hashchange', function () {
var page = location.hash.slice(1);
$('[data-page]').addClass('hidden');
$('[data-page=' + page + ']').css('z-index', '0');
$('#1st-row').children().eq(0).css('z-index', '1');
$('#1st-row').children().eq(1).css('margin-left', '-200px');
$('[data-page=' + page + ']').removeClass('hidden');
$('#1st-row').children().eq(1).animate(
{ 'margin-left':'0px' }, 1000);
$(':checkbox').checkbox('check');
$('#debug').attr('value', 'true');
});
I figured something wasn't working as it should when I redesigned my site so i changed it a bit:
$(window).on('hashchange', function () {
var page = location.hash.slice(1);
$('[data-page=' + page + ']').slideDown();
});
but it's still not working.
I have to reload the page several times, go to the site again(ctrl+l -> enter), reload a few more times and then it magically works. it won't work a second time though... I have to refresh and reload the page/site a few more times before it decides to let hashchange work.
you can test it at lingonsorbet.se.
just add #advanced to the url and a box should appear to the right. works fine in firefox and ie.
am I doing something wrong or has anyone else run into this too?
hashchange is not fired on page load
The hashchange event is only triggered when you manually change the hash or when you click an in-page anchor link (Advanced). Reloading a page without changing the hash does not trigger hashchange.
You should refactor your hash-checking code into a new function and execute it
on the hashchange event
on page load.
Consider this code:
function changeLayoutByHash() {
var page = location.hash.slice(1);
$('[data-page=' + page + ']').slideDown();
// etc.
}
$(window).bind('hashchange', changeLayoutByHash );
$(window).ready( changeLayoutByHash );
As per your question, I don't see inconsistencies in the way Chrome handles this.
If you keep reloading example.com#advanced, hashchange will not be fired. Only when you change the hash to example.com#advance (delete a character), it's registered as a changed hash.
Debugging
To find out whether or not certain events are being fired, you can always write a little console.log('hashchange fired'); into your event handlers and then (with ChromeDev Tools open) see in the console what your program does.
I'm writing a firefox xul extension, and I must have an interaction beetween the web page and extension.
Example: If I press a link from the page I want to call a function in the xul extension.
Anyone know if there is a way?
Thanks a lot
Yes, you can do this. You'll need to access page content with the content object.
In your extension code you can select all links and then add an eventListener:
allLinks = content.document.getElementsByTagName("a"),
for (var i=0, il=allLinks.length; i<il; i++) {
elm = allLinks[i];
elm.addEventListener("click", nowclicked, false);
}
And then your event listener would look something like:
nowclicked : function () {
alert("a linked was clicked!");
}
If you need a working example, I've modified the Link Target Finder extension by Robert Nyman to add an alert when links are clicked. The modified code is in linkTargetFinder.js.
See MDN example for Sending data from unprivileged document to chrome document.
Basically, in your chrome code you have to add a listener:
// The last value is a Mozilla-specific value to indicate untrusted content is allowed to trigger the event.
document.addEventListener("MyExtensionEvent", function(e) {myExtension.myListener(e);}, false, true);
and fire the event from content script. Note that document in the following is the contentDocument not XulDocument
var evt = document.createEvent("Events");
evt.initEvent("MyExtensionEvent", true, false);
element.dispatchEvent(evt);
I have implemented a script to prevent the link in my mobile app on my ipad.
It works fine but I have problem now with the popup I have with jquery mobile.
The problem is when I use this script, the popup window doesn´t open anymore.
What can I do to open the popup window?
The script:
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if('href' in curnode && ( curnode.href.indexOf('http') ||
~curnode.href.indexOf(location.host) ) ) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
In this case, you need to open it programmatically.
$('#popupID').popup('open');
Solved it...
what i have done:
instad to use the script i have write above, i only use this code in the .
<a onclick="parent.location='root/example.html'" id="ex"></a>
this allows me when i see my app in the fullscreen mode.. to navigate between the pages without to open it in the browser, the page loaded in my app.