I'm trying to build a safari extenstion (mostly for learning purposes) that creates a delicious bookmark, when the user right clicks on a link. I've watched the WWDC Creating a Safari Extension video and everything is working fine.
Except that i don't have a clue how to find out if the user clicked on a link (or just some text) and if so, get it's url and title. What i got so far is this:
document.addEventListener("contextmenu", handleContextMenu, false);
function handleContextMenu(event){
safari.self.tab.setContextMenuEventUserInfo(event,getSelection().toString());
}
But this obviously only gives me a string of the selection. Now, according to the Safari Reference Library getSelection() returns a DOMSelection object. But even there i'm not able to spot a method that gives me a handle on the selected link.
As you might notice, i'm fairly new to this whole javascript and DOM stuff, so please excuse if this is an obvious question :)
Ciao,
Sven
On a simple right-click, the selection will be set inside the anchor link. This means you will have its text node selected, but the link node itself won't be. Therefore, it's useless to try to find a link inside a selection.
You can use DOMSelection's focusNode to get the last selected text node and check its ancestors until you wind up to an <a> element. That should do about what you want.
var link = null;
var currentElement = event.getSelection().focusNode;
while (currentElement != null)
{
if (currentElement.nodeType == Node.ELEMENT_NODE && currentElement.nodeName.toLowerCase() == 'a')
{
link = currentElement;
break;
}
currentElement = currentElement.parentNode;
}
// link is now an <a> element if the user selected a link's contents
zneak's answer did not work for me, so I worked with event.target instead of the selection:
var link = evt.target;
// get parent node in case of text nodes (old safari versions)
if(link.nodeType == Node.TEXT_NODE) {
link = link.parentNode;
}
// if for some reason, it's not an element node, abort
if(link.nodeType != Node.ELEMENT_NODE) {
return;
}
// try to get a link element in the parent chain
while(link != null &&
currentElement.nodeType == Node.ELEMENT_NODE &&
link.nodeName.toLowerCase() != "a") {
link = link.parentNode;
}
if(link) {
// do stuff
}
Related
I am trying to create some javascript that when an object is added to the window, a listener listens for any click on the body except for the placed object and removes the object if anywhere on the window except the actual object itself is clicked.
Through numerous unsuccessful attempts, the idea I came up with is to dynamically add an overlay div to the screen called overlay2 (or whatever, it doesnt matter) and then listen for clicks on that div. When I add the overlay to the window and set the zIndex to a higher number than the top element already placed (say 5000) and then set the zIndex of the only object to be placed above the overlay to an even higher number (say 6000), the overlay still appears on top of everything and I cannot select any of the objects in the div I meant to place above it.
var overlayDiv = document.createElement('div');
overlayDiv.setAttribute('id', 'overlay2');
overlayDiv.style.zIndex = '5000';
overlayDiv.style.width = '100%';
overlayDiv.style.height = '100%';
overlayDiv.style.left = '0';
overlayDiv.style.top = '0';
overlayDiv.style.position = 'absolute';
document.body.appendChild(overlayDiv);
$(container).append(template);
template.style.zIndex = '6000';
//Listeners
//Page click listener. Closes the tool when the page is clicked anywhere but inside the parent.
var initialClick = false;
$('body').on('click.editObjectListeners', function(event) {
var target = EventUtility.getTarget(event);
if(initialClick) {
console.log(target.id);
if(target.id == 'overlay2' && target.id != '') {
$(overlayDiv).remove();
finish();
};
}
initialClick = true;
});
I've determined that this has everything to do with the absolute positioning of the overlayDiv. While testing, if I used absolute positioning to place the template and if I append the template object directly to the body like I did the overlayDiv, the zIndex works above the overlayDiv as I originally anticipated. Unfortunately absolutely positioning this element doesn't make much sense for me beyond testing purposes. Is there a way to get around this?
Turns out that z-index can really only be used successfully with absolute placed elements. Therefore the original plan to solve the body click listener will not work. Instead, I decided to use jQuery and listener objects to listen for the click instead. Its a much cleaner solution, I just had to wrap my head around it. You can view my other solution here.
I don't know how much this will help your particular problem, but I just happened to notice that you may have a problem with your use of jQuery's "on()" method.
First off, you are using jQuery version 1.7+ with that, correct?
Unlike "live", I believe that the on() parameters are event, selector, function.
So where you have this:
$('body').on('click.editObjectListeners', function(event) {
var target = EventUtility.getTarget(event);
if(initialClick) {
console.log(target.id);
if(target.id == 'overlay2' && target.id != '') {
$(overlayDiv).remove();
finish();
};
}
initialClick = true;
});
I think you want this:
$('body').on('click.editObjectListeners', [SOME SELECTOR], function(event) {
var target = EventUtility.getTarget(event);
if(initialClick) {
console.log(target.id);
if(target.id == 'overlay2' && target.id != '') {
$(overlayDiv).remove();
finish();
};
}
initialClick = true;
});
Hope that helps in some small way.
Good luck!
Try setting the zIndex before appending it to container.
template.style.zIndex = '6000';
$(container).append(template);
I have a weird problem.
I try to write a GreaseMonkey script to be run in Firefox and Google Chrome.
With Chrome I tried 2 extensions : "TamperMonkey" and "Blank Canvas Script Handler", mainly because my script check regulary for a new version on an external site and this is considered as cross site scripting and not authorized in Chrome.
To show you my problem, I write a simple test case :
// ==UserScript==
// #name test
// #namespace http://fgs.ericc-dream.fr.nf
// #description test gm script
// #include http://gaia.fallengalaxy.eu/
// #author ericc
// #version 0.0.1
// ==/UserScript==
/* We attach an event listener to the body tag and trigger the function
* 'message' each time that an element is inserted in the page */
var el = document.body;
el.addEventListener('DOMNodeInserted', message, false);
var extraFlag = false;
function message(event) {
/* first we capture the id of the new inserted element
* (the one who created the event) */
var objId = event.target.id;
/* add an event listener on the map container */
if (objId == "extra") {
el = document.getElementById('extra');
el.addEventListener('DOMSubtreeModified',readTest,false);
GM_log(el.style.display);
}
}
function readTest() {
el = document.getElementById('extra');
GM_log(extraFlag);
GM_log(el.style.display);
if ((el.style.display != 'none') && (!extraFlag)) {
alert('extra');
extraFlag = true;
} else if ((el.style.display == 'none')) {
extraFlag = false;
}
}
the div element 'extra' is modified by the page. The problem is that Chrome is unable to read the value of el.style.display and thus extraFlag never become 'false' again.
I use this flag to avoid to run the code several time, the site is heavily JavaScript driven
This code work nicely in Firefox !
I tried to search with Google but can't find a correct answers. Seems easy to change the value of display, but it seems that I'm the only one who try to read it !!!
I write this code because "DOMAttrModified" isn't supported in Chrome :-(
Thanks in advance for your help
ericc
I'm having a hard time understanding exactly what your question is, but it looks like Chrome can read .style.display properties just fine. I just threw the following code into an HTML template and loaded it in Chrome 10:
<div id="div1">
</div>
<div id="div2" style="display: block;">
</div>
<div id="div3" style="display: inline;">
</div>
<div id="div4" style="display: none;">
</div>
<script type="text/javascript">
alert(document.getElementById("div1").style.display);
alert(document.getElementById("div2").style.display);
alert(document.getElementById("div3").style.display);
alert(document.getElementById("div4").style.display);
document.getElementById("div1").style.display = "none";
alert(document.getElementById("div1").style.display);
</script>
The code produced 5 'alert' boxes with the following output:
blockinlinenonenone
So it seems Chome reads this property just fine.
Maybe the issue is that the webpage on which you're running your greasemonkey script is behaving differently in Chrome than in Firefox? Could it be that the ID of the element is different, or the element is being removed from the DOM instead of just being hidden? What would happen if you modified your function with some more checks, kinda like this?
function readTest() {
el = document.getElementById('extra');
if(el)
{
GM_log(extraFlag);
GM_log(el.style.display);
if (el.style.display && (el.style.display != 'none') && (!extraFlag)) {
alert('extra');
extraFlag = true;
} else if ((el.style.display == 'none') || !el.style.display) {
extraFlag = false;
}
}
else
{
GM_log(extraFlag);
GM_log("element not present");
extraFlag = false;
}
}
Does that help? If not, is there any other reason you could think of why el.style.display wouldn't evaluate properly in Chrome?
It might help if we knew more about what you're trying to do with your script, and possibly what web page or code you're trying to run this on.
After several hours and a ton of test case, I finally find an acceptable explanation (but not yet a solution !)
Let's explain the scenario :
1°) the user click on an icon on the screen
2°) the div#extra, which is already present in the page, is made visible by removing its display property (.style.display="")
3°) the div#extra is filed by an AJAX function with some elements depending on which icon was clicked by the user (more than 200 elements in certain case)
4°) the user click on an other icon to close the div
5°) all elements from the div#extra are removed
6°) the div#extra is hidden by putting is display property to 'none' (.style.display="none")
At first, on Firefox, I used "DOMAttrModified" event on the div#extra to check when the display property was modified and react accordingly.
Problem, this event is not supported on Chrome !!
So I replace it by "DOMSubtreeModified" (attached to div#extra) which is supported by both browser .... but not exactly in the same way :-(
On Firefox, an event is fired for every modification in the subtree but also when the element itself is modified.
On Chrome, they are a little bit more strict and fired event only for modification in the subtree .... and this is my issue !
In Firefox,first event is fired at point 2 (in the scenario) and last at point 6 allowing my function to read when the div#extra is made hidden
In Chrome, first event is fired at point 3 and last at point 5 ... so when the the div#extra is hidden my function is not called and I can't modify the flag !!!! CQFD
Now, or I will add an event listener to the body of the page to intercept when the display property is modified, but it will generate a lot of call to my function, or the developer of TamperMonkey said yesterday that his extension now support "DOMAttrModified" (on Chrome) ....
Thanks anyway to take the time to understand my question and your proposed solution
ericc
I need to make a pseudo-chat addition to my website. The idea is that you write somewhere on the website, then press a button next to it and it transfers the written to a frame above. I tried doing it with textarea and even found a code how to select and copy the text, but it was also said that it works only in IE.
Does anyone have an alternative idea, because textarea seems a little iffy : /
Thanks in advance
If you want to copy text from a textarea reliably and only need to store it in a variable rather than to the user's clipboard (which seems to be what you're suggesting), the following will do it in all major browsers:
function getSelectedText(textarea) {
if (typeof textarea.selectionStart == "number") {
return textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
} else if (typeof document.selection != "undefined") {
textarea.focus();
return document.selection.createRange().text;
}
}
On a page I have an Iframe that contains input boxes, and if I select one of those boxes in FireFox and use document.activeElement, I get the IFrame. Thats okay, I just use that IFrame and get its contentDocument, save it, then do activeElement again and now I get the input box.
However, in Chrome and Safari, when I select one of the boxes inside the IFrame and do document.activeElement, I get the body element. If I select an element outside the IFrame, document.activeElement works perfectly.
How can I get the active element in my case?
Not sure if this will work for you exactly but you can try a similar approach to this. Also, I believe you'll be bound to same domain restrictions with the approach below.
function showme() {
var currentDoc = document;
if (document.activeElement == document.body) {
currentDoc = window.frames['child-iframe'].document;
}
if (currentDoc.activeElement.type == "text"
|| currentDoc.activeElement.type == "textarea"
|| currentDoc.activeElement.type == "checkbox") {
currentDoc.activeElement.style.color = "red";
}
}
window.onload = function() {
setTimeout("showme()", 5000);
}
I want to inactive selecting & copying text in html page.
when I used Javascript & inactive right click user can use Ctrl+V!!
You can't. Don't even try. Don't annoy your users.
If you put it publicly on the web, it can be copied. Technically, it already is copied as soon as the user sees it. As colithium pointed out, all the techniques can be circumvented. Heck, you can look at the source code. You can curl the raw data from the command line, no JS/IMG/layer hack can prevent that.
There is no full proof solution. You can play javascript games (easy to turn off). You can place invisible layers about the text so it can't be selected easily (easy to view source). You can use images instead of text (just bad).
While I agree in principle with the other posters that trying to do this may annoy the user, sometimes a manager or customer demands that this be done, and so an answer needs to be supplied.
Check out this page on www.dynamicdrive.com that will supply you with a few JavaScripts towards this end. Specifically see "Disable Text Select Script" and "No right click script".
Disable Text Select Script:
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
No right click script:
//Disable right mouse click Script
//By Maximus (maximus#nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message = "Function Disabled!";
///////////////////////////////////
function clickIE4() {
if (event.button == 2) {
alert(message);
return false;
}
}
function clickNS4(e) {
if (document.layers || document.getElementById && !document.all) {
if (e.which == 2 || e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS4;
} else if (document.all && !document.getElementById) {
document.onmousedown = clickIE4;
}
document.oncontextmenu = new Function("alert(message);return false")