Thanks a lot for your mini-tutorial, Mike. I still have a lot to learn about
DOM, jQuery and the scope of "this".
The thing is that all of the commands you mention work when I use them
outside the plugin (in debugger time), but not when I use the word "this"
inside the function. I thought I would post the code here in case anyone can
see what's wrong:
jQuery.fn.jTextify = function() {
return this.each(function(){
if ($(this).is("iframe")) { /** Checks if the item to be
converted is an iFrame. */
console.log(this);
this.contentWindow.document.designMode = "on"; /** Sets iframe's
designmode to on.*/
}
});
};
The funny thing is that when I use console.log(this) inside the iteration of
the plugin I receive the following answer in my example page:
<iframe id="foo">
wich is the expected result, yet it doesn't work as expected at modifying
the designMode state.
Thanks to anyone that can find a solution to this problem.
On 2/10/07, Michael Geary <[EMAIL PROTECTED]> wrote:
As you can see from your first (presumably working?) example,
.contentWindow is a property of an *HTML element*.
Therefore, the real question is, "How do I get the HTML Element?"
If you are inside an $('foo').each() callback function, then "this" is the
HTML element. So, you could use:
this.contentWindow.document.designMode = "on";
What messed things up was doing $(this). $(this) returns a new jQuery object- but all you
needed was "this" itself.
If there is only one IFRAME in question (obviously true because you are
accessing it by ID), then you can use this bit of information:
document.getElementById('foo') can be directly translated to $('#foo')[0].
This means you can skip the "each" loop and use:
$("#iframe_name")[0].contentWindow.document.designMode = "on"
Obviously in this particular case there is little reason to prefer the
jQuery code over the straight DOM code.
Finally, a debugging tip. Instead of poking around trying things to see if
you get lucky, use a debugger to *look* at the values returned by various
functions. You would see, for example, that $(this) was not a DOM element
and did not have a .contentWindow property.
Why did some things you tried just not work and others triggered an error?
Well, this code would run without triggering an error, but it wouldn't do
anything useful:
$(this).designMode = "on";
That merely added a designMode property to the jQuery object. A perfectly
legal operation, but not useful.
$(this).contentWindow.document.designMode = "on";
That causes an error, which you would discover by breaking it down step by
step:
console.debug( $(this) );
console.debug( $(this).contentWindow );
console.debug( $(this).contentWindow.document );
The first console.debug call would show a jQuery object. The second would
show "undefined", because a jQuery object does not contain a .contentWindow
property. The third would throw an exception, because $(this).contentWindow
is undefined, and "undefined" of course does not have a .document property.
-Mike
I need to use the following command to activate designmode in an iFrame
(designmode is when you can use an iFrame like it was a text editor, think
Word or when you compose an email in Gmail):
document.getElementById("iframe_name").contentWindow.document.designMode =
"on"
I've tried to jQuerify the sentence in a variety of manners but it never
works. Sometime the command wont work and other times they trigger an error.
So far I've tried with (I use the reserved word "each" cause I'm working
inside a plugin):
$(this).contentWindow.document.designMode = "on";
$(this).document.designMode = "on";
$(this).designMode = "on";
and
$(this).attr("contentWindow.document.designMode", "on")
$(this).attr("document.designMode", "on")
$(this).attr("designMode", "on")
nothing worked.
I wouldn't mind sticking to pure javascript for once, but the thing is
that this doesn't work either, wich is driving me crazy:
document.getElementById($(this).attr("id")).contentWindow.document.designMode
= "on"
Has anyone here used designMode for an iFrame with good results? Why
doesn't jQuery support it?
Thanks.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
