Develop Reference

preventDefault, make changes and continue routine

I have a small site with a script that runs a query with mysql and returns me some data, including domains. These domains are generated html links and I want to change in javascript, since I can not access the part of php, but yes to the javascript and css code.
I just want you the code is run when the click event is triggered on a link. I tried to stop the execution by default and make a change, but my code does not open the page. If I remove preventDefault only works in firefox, but I have not chrome. (window.open not use, I want to change the original link).
var domains = document.getElementsByClassName("domain");
for(var x = 0; x < domains.length; x++){
if(domains[x].addEventListener) {
domains[x].addEventListener("click", changeLink, "false");
} else if(domains[x].attachEvent) {
domains[x].attachEvent("onclick", changeLink);
}
}
function changeLink(evt){
var urlOriginal = this.href;
// If I remove preventDefault, the function runs correctly on firefox but not in chrome
evt.preventDefault();
if(urlOriginal != 'http://google.com') {
urlOriginal = urlOriginal.replace(/http:\/\//g, '');
evt.stopPropagation();
this.href = 'http://intodns.com/' + urlOriginal;
console.log('Okay !');
}
return true;
}
I tried several changes but none is running, not really the case.
Does anyone know the cause of malfunction? How I can fix it without window.open?
Thanks

try stopPropagation instead
http://api.jquery.com/event.stoppropagation/ - read more about it

If I understand correctly, you want to redirect the user to a different link, instead of the one that is set in the href attribute.
Once the click is made, nothing will happen if you change the href attribute of the element. What you are looking for is redirecting the user, and this is made possible by modifying the location object which resides on window.
Instead of this line:
this.href = 'http://intodns.com/' + urlOriginal;
Try this:
window.location = 'http://intodns.com/' + urlOriginal;

Can it be determined if window.resizeTo will work?

Inside the Javascript console, if I execute:
m = window.open(location.origin);
m.resizeTo(400, 400);
The window will resize, but if I just execute:
window.resizeTo(400, 400);
then nothing happens. I understand the reason for this behavior. How can I detect situations where window.resizeTo will do nothing?

Approach 1:
You can use the window.opener property. If it's null, then you did not open that window and thus cannot resize it.
window.parent is intended more for iframes and the like.
Such as:
if (m.opener) {
m.resizeTo(400, 400);
} else {
// You did not create the window, and will not be able to resize it.
}
Approach 2:
ajp15243 brings up a good point, so one thing you could do is listen to the resize event and see if your resizeTo worked:
var resizeFired = false;
...
var triggeredResize = function() {
resizeFired = true;
m.removeEventListener('resize', triggeredResize);
}
m.addEventListener('resize', triggeredResize, true);
m.resizeTo(400, 400);
if (resizeFired) {
// Your resize worked.
}
I haven't been able to fully test this, but it's one potential approach nonetheless. For IE8 and below you may need to use attachEvent instead. Also as #Wesabi noted, the resize may fire for other events (and may fire if the user is resizing the window as the listener as attached), so it's best to execute this is the shortest time span possible.
Approach 3:
Another approach would be to call m.resizeTo(400, 400) and then check the window size to see if the current size is equal to what you set it to:
m.resizeTo(400, 400);
if (w.outerWidth != 400 && w.outerHeight != 400) {
// Your resize didn't work
}

The easiest thing to do would be checking if the window has a parent. if !window.parent, it means it's the main window which cannot be resized with JS, else you have your resize case.
Edit: Igor posted it before I found it: you want m.opener() not window.parent

MDN is a great JavaScript resource: https://developer.mozilla.org/en-US/docs/Web/API/Window.resizeTo
Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
SO, you need to detect if you are a child window:
https://developer.mozilla.org/en-US/docs/Web/API/Window.opener
if (window.opener) {
console.log('I can be resized');
} else {
console.log('I cannot be resized');
}

Javascript .onload not firing in IE? window.open reference issue?

I haven't been able to make sense of the answers to related questions so far(down to my knowledge level), so...
I have a simple script(using jQuery) that opens a new window and adds certain content from the parent into a specified container inside the child. I'm not sure if it's my approach that's wrong or I'm just missing a step - the script to run on the new window runs in IE when it's outside of the window.onload function, but this breaks FF, and FF is happy when it's inside of the window.onload, but then the new window in IE doesn't appear to be doing anything(no alert, no add of content, nada).
Please can anybody explain to me why this is the case/what I'm doing wrong? Is it something to do with the reference to window.open?
This is the script:
var printPage = function(container){
$('.printButton').click(function(){
var printWindow = window.open('printWindow.html');
var contentFromParent = $(container).eq(0).html();
/*works for IE, but not FF
printWindow.alert('works for IE, but not FF');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;*/
/*works for FF and Chrome but not IE:*/
printWindow.onload = function(){
printWindow.alert('works for FF and Chrome but not IE');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}
/*I also tried:
$(printWindow.document).ready(function(){
printWindow.alert('load the page, fill the div');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}); //works for IE, not working for FF/Chrome*/
})
}
printPage('#printableDiv');
The HTML:
<div id="wrap">
<button href="#" class="printButton">Print</button>
<div id="printableDiv">
<p>I want to see this content in my new window please</p>
</div>
</div>
UPDATE
Thanks for your pointers about onload in the new window - I've gone with this solution for now: Setting OnLoad event for newly opened window in IE6 - simply checking the DOM and delaying the onload - working for IE7/8/9.
I'm not sure if you'd call it an 'elegant' solution, but it's working! Further comments, especially if you think this is flawed, would be appreciated. Thanks.
var newWinBody;
function ieLoaded(){
newWinBody = printWindow.document.getElementsByTagName('body');
if (newWinBody[0]==null){
//page not yet ready
setTimeout(ieLoaded, 10);
} else {
printWindow.onload = function(){
printWindow.alert('now working for all?');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}
}
}
IEloaded();

Can it be that the page you open fires the 'onload' event before you set the event handler printWindow.onload = ... ?
You might consider including some javascript in your 'printWindow.html' page. Let's say you add a short <script>var printWindowLoaded = true;</script> at the end of your page. Then your main script would do something like this:
function doStuff() {
//...
}
if (printWindow.printWindowLoaded)
doStuff();
else
printWindow.onload = doStuff;

Safe way to interact with page's DOM from Overlay JS

I have a Firefox extension that detects whenever a page loads in the browser and returns its window and document. I want to attach some events (that launch functions in my addon's overlay) to elements in the page, but I don't know how to do this in a way that's safe.
Here's a code sample:
var myExt = {
onInit: function(){
var appcontent = document.getElementById("appcontent");
if(appcontent){
appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
}
},
onPageLoad: function(e){
var doc = e.originalTarget;
var win = doc.defaultView;
doc.getElementById("search").focus = function(){
/* ... 'Some privelliged code here' - unsafe? ... */
};
}
};
So can anyone tell me what's the safe way to add these events/interact with the page's DOM?
Thanks in advance!

I think that you want to listen to the focus event, not replace the focus() function:
doc.getElementById("search").addEventListener("focus", function(event)
{
if (!event.isTrusted)
return;
...
}, false);
Usually, there is fairly little that can go wrong here because you are not accessing the page directly - there is already a security layer (which is also why replacing the focus() method will have no effect). You can also make sure that you only act on "real" events and not events that have been generated by the webpage, you check event.isTrusted for that like in the example code. But as long as you don't unwrap objects or run code that you got from the website, you should be safe.

Setting Focus to an iFrame in IE

There is a tree menu in my application and on click of the menu items, it loads a url in a iFrame. I like to set the focus in an element of the page loaded in the iFrame.
I'm using this code, and it works perfectly in all the browsers except IE:
var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').focus();
I have tried all different options like using setTimeout, but no chance.
After the page loads, when I hit the tab key, it goes to the second input, which means it's been on the first input, but it doesn't show the cursor!
I am using ExtJS and the ManagedIFrame plugin.
Any help is appreciated.

You need to call the focus() method of the iframe's window object, not the iframe element. I'm no expert in either jQuery or ExtJS, so my example below uses neither.
function focusIframe(iframeEl) {
if (iframeEl.contentWindow) {
iframeEl.contentWindow.focus();
} else if (iframeEl.contentDocument && iframeEl.contentDocument.documentElement) {
// For old versions of Safari
iframeEl.contentDocument.documentElement.focus();
}
}

Is the iFrame visible onload, or shown later? The elements are created in different order which is the basis of the setTimeout approach. Did you try a high value wait time on a set timeout?
Try something like at least a half second to test...IE tends to do things in a different order, so a high timeout may be needed to get it not to fire until render/paint finishes:
$(function(){
setTimeout(function() {
var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').focus();
}, 500);
});

Difficult to troubleshoot without a working example, but you might try hiding and showing the input as well, to force IE to redraw the element.
Something like:
var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').hide();
var x = 1;
myIFrame.contents().find('#inputName').show().focus();
This might jolt IE into displaying the cursor.

I could get IE to focus an input field in an iframe with:
iframe.focus();
var input = iframe...
input.focus();
iframe.contentWindow.document.body.focus();
input.focus();