homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
code generated in IFRAME messed up by IE
stipped quotes, function calls wrapped
Joey_33




msg:3378991
 9:33 am on Jun 26, 2007 (gmt 0)

Hello,

Maybe some of you have got acquainted with WYZZ wysiwyg editor. I'm trying to add one innocent thing and I beleive the problem is about IE and DOM in general that's why I'm writng to all of you generous and wise people out there hoping for some clue...

Here's the problem:

In the main site there is one iframe where the user edits text, then changes selections to bold, changes colours etc.
Typical wysiwyg editor.

There's also the option of inserting images. And here's my nightmare. I edited the code adding onClick event to this newly inserted image. So the code should finally look like this:

<img src="..." onClick="parent.somefunction()" alt="...">

everything works fine in FF but of course IE imposes some other philosophy wrapping the attribute of onClick event within a new function and generates:

<img src="..." onClick="function Anonymous() {parent.somefunction()}" alt="">

which doesn't work of course.

For clarity this code is generated after a function in WYZZ which makes code from the iframe XHTML compliant. It goes through all childNodes of body (in the dynamically generated page) and makes their nodeNames lower case, adds / before closing tags etc. Basically it builds a new body node but XHTML.

When I switched it off for a while, the onClick event is NOT changed BUT quotes in all other attributes are gone...

so when not making xhtml compliant I end up with:

<img src=source alt=alttext onClick=parent.somefunction()>

The attribute values are suddenly with no quotes...

This is some nightmare... It's my fourth day of struggling with the weird ie.

Hoping for some clue,
Regards,
Konrad

 

daveVk




msg:3379061
 11:47 am on Jun 26, 2007 (gmt 0)

perhaps <img src="..." onClick="parent.somefunction" alt="..."> that is a direct reference to the function rather than a code snippet that calls the function?

[edited by: daveVk at 11:48 am (utc) on June 26, 2007]

Joey_33




msg:3379115
 1:09 pm on Jun 26, 2007 (gmt 0)

Hello,

it's code that calls a function defined in the parent (top) window.

I just have a simple page with an iframe. That main page has a function defined that should be called by img in the iframe.

I've discovered that whatever function you put in onClick event handler the result is the same. Even when I leave it blank, like this: onClick="" it is wrapped by that weird function Anonymous.

I'm afraid it's just another IE nonstandard behaviour.

Regards

daveVk




msg:3379835
 3:20 am on Jun 27, 2007 (gmt 0)

1 - "parent.somefunction()" is a statement, what is needed is the handler like "parent.somefunction" so wrapping it in an anon function seems a valid way to go.

2 - While onclick="parent.somefunction" seems logical to me
I assume it expects statement(s), unlike the javascript assignment element.onclick=handler.

3 - Its not obvious to me why "function Anonymous() {parent.somefunction()}" should not work the same as a direct call to parent.somefunction().

4 - You could define a function within the iframe, use that as the handler and have it call parent.somefunction(), but is that different from the anon function?

Joey_33




msg:3380051
 10:56 am on Jun 27, 2007 (gmt 0)

Hello,

1 - "parent.somefunction()" is a statement, what is needed is the handler like "parent.somefunction" so wrapping it in an anon function seems a valid way to go.

2 - While onclick="parent.somefunction" seems logical to me
I assume it expects statement(s), unlike the javascript assignment element.onclick=handler.

I'll be honest with you... I've been reading the above points a few times but apparently my knowledge of JS is still too shallow;) I don't get a difference yet between statements and handlers. Isn't onClick="parent.function()" an event handler and statement at the same time....?

I'm currently more a bit of an experimenting newbie so please excuse my ignorance. I'm eager to learn though;)

3 - Its not obvious to me why "function Anonymous() {parent.somefunction()}" should not work the same as a direct call to parent.somefunction().

Yes, it should but when IE reads the innerHTML value of the body of the newly generated page it places linebreaks after { and } so what comes out in the code is actually:

function Anonymous() {
parent...
}

which causes error messages in debugger console - '{' missing and so on. It doesn't have a chance to work

4 - You could define a function within the iframe, use that as the handler and have it call parent.somefunction(), but is that different from the anon function?

Yeah, I tried this but because of these \n commands (point 3 above) it doesn't work either, just calls debugger window.

I've just found a solution, awkward as it may seem but it works;) I just read the value of the attribute node (onclick), put it toString(), replace regex patterns, basically getting rid of the wrapping anon function and then paste the remaining code to the generated code.

It doesn't look too elegant but... the point is I'm forward

MANY thanks for help and good will!
regards,
Konrad

ps. if you could only cast some light upon my question concerning point 2 and 3? I'd be grateful.

daveVk




msg:3380176
 1:03 pm on Jun 27, 2007 (gmt 0)

In javascript the following are valid event handler assignments

element.onclick=somefunction;
element.onclick=function ...

functions are objects, so onclick needs to be assigned a function object, in the first case a function named somefunction defined elsewhere, in the second case the function is defined literally.

The following is NOT valid

element.onclick=somefunction();

unless somefunction() returns a function object.

In html code the onclick attribute can be any javascript statement(s) eg onclick="x=2;y=4;" this needs to convert to a function object.

element.onclick.toString() returns the text of the function object, this I think is also how the debugger shows function object

... and then paste the remaining code to the generated code.

Please show the code you use here if you are just regenerating <img src="..." onClick="parent.somefunction()" alt="..."> I dont see how you are getting anywhere.

I am missing the point somewhere, I dont see why the new lines are a problem. Is it a problem of copying the code out of the iframe?

Joey_33




msg:3380293
 2:51 pm on Jun 27, 2007 (gmt 0)

hello,

in the main page the code (coming from WYZZ editor) that refers to iframe named 'wysiwygfull' and used to insert image:

function insertimage() {

var subtext;
subtext = prompt('Wprowadź tekst pod zdjęciem:');
var theImage = '<div class="main6"><div id="foto_' + img_no + '" onClick="parent.load_pic(\'' + "foto_" + img_no + '\')"><img src="" alt="image"></div><div class="sp1a">' + subtext + '</div></div>';
img_no += 1;
send_div_no ();
insertHTML(theImage);

}

then theImage var is pasted to the contents of body:

function insertHTML(html) {

if (browserName == "Microsoft Internet Explorer") {
document.getElementById('wysiwygfull').contentWindow.document.selection.createRange().pasteHTML(html);

}

At this point the handler function is NOT wrapped, however quotes in attribute values are missing.

Step 3 is passing body contents through a function that reads all nodes and reconstructs them, however xhtml compliant.

function h2x(node,inPre) {

// we will pass the node containing the Wyzz-generated html
var xout = '';
var i;
var j;
// for each child of the node
for(i=0;i<node.childNodes.length;i++) {
if(node.childNodes[i].parentNode && String(node.tagName).toLowerCase()!= String(node.childNodes[i].parentNode.tagName).toLowerCase()) continue;
// alert('Nodes: '+ node.childNodes.length);
switch(node.childNodes[i].nodeType) {
case 1: { // for element nodes
// get tag name
var tagname = String(node.childNodes[i].tagName).toLowerCase();
if(tagname == '') break;

xout += '<' + tagname;
var atts = node.childNodes[i].attributes;
var attvalue;
for(j=0;j<atts.length;j++) { // for each attribute

//if (atts[j].nodeName!="onClick"){
var attname = atts[j].nodeName.toLowerCase();
//}
//else {
//var attname = atts[j].nodeName();
//}

if(!atts[j].specified) continue;
var validatt = true;
switch(attname) {
case "style": attvalue = node.childNodes[i].style.cssText; break;
case "class": attvalue = node.childNodes[i].className; break;
case "name": attvalue = node.childNodes[i].name; break;
break;
default:
try {
attvalue = node.childNodes[i].getAttribute(attname,2);
} catch(e) {
validatt = false;
}
}

if(validatt) {
if(!(tagname=='li' && attname == 'value')) {
xout += ' '+attname + '="' + fixatt(attvalue) + '"';
}
}
}
if(tagname == 'img' && attname == 'alt') {
xout += ' alt=""';
}
if(node.childNodes[i].canHaveChildren&#166;&#166;node.childNodes[i].hasChildNodes()) {
xout += '>';
xout += h2x(node.childNodes[i],tagname=='pre'?true:false);
xout += '</' + tagname + '>';
} else {
if(tagname == 'style'&#166;&#166;tagname == 'title'&#166;&#166;tagname=='script'&#166;&#166;tagname=='textarea'&#166;&#166;tagname=='a') {
xout += '>';
var innertext;
if(tagname=='script') {
innertext = node.childNodes[i].text;
} else {
innertext = node.childNodes[i].innerHTML;
}
if(tagname=='style') {
innertext = String(innertext).replace(/[\n]+/g,'\n');
}
xout += innertext + '</' + tagname + '>';
} else {
xout += '/>';
}
}
break;
}
// else if(node.childNodes[i].nodeType == 2) { // for attribute nodes

// }
case 3: { // for text nodes
if(!inPre) { // don't change inside a <pre> tag
if(node.childNodes[i]!= '\n') {
xout += fixents(fixtext(node.childNodes[i].nodeValue));
}
} else {
xout += node.childNodes[i].nodeValue;
break;
}
}
default:
break;
}
}
return xout;
}

in xout the handler function is wrapped....;(

next I go to another page that is identical, ie it has the same iframe and functions defined in its parent WITH ONE difference. The reason for that is that in FF when an iframe designMode=on attribute you cannot click elements. I need to make script crossbrowser. So the new iframe is not content editable. It just displays contents of the iframe from the prevoius page.

So first you insert images, then on another page see a preview in an iframe where you click images (calling a function defined in iframe's parent) to open popup windows and upload images. The last stage will be to save the whole code to a database.

Anyway the problem is with the preview page, because the code from the original iframe is written into a new iframe again, this time however with the handler function wrapped. The new lines cause the problem.

What baffled me now is with those handlers and function objects. I see I'll have to read into this wholeheartedly...:)

I think for copyright reasons I should stress where the cited code comes from:

// WYZZ Copyright (c) 2007 The Mouse Whisperer
// Contains code Copyright (c) 2006 openWebWare.com
// This copyright notice MUST stay intact for use.
//
// An open source WYSIWYG editor for use in web based applications.
// For full source code and docs, visit [wyzz.info...]
//
// This library is free software; you can redistribute it and/or modify
// it under the terms of the GNU Lesser General Public License as published
// by the Free Software Foundation; either version 2.1 of the License, or
// (at your option) any later version.

To Moderator:
If I may have breached any rules with citing codes, please let me know;)

Thanks to you DAVE for help,
regards

daveVk




msg:3380838
 3:15 am on Jun 28, 2007 (gmt 0)

Ok, what this code is doing is generating html based on the a transversal of the DOM of some element (IFrame?). The generated html will be to a particular standard ( xhtml I suspect ) regardless of the standard of the original html.

That explains why there are issues with the generated code for the event handling.

Your approach of striping all function packaging is valid.

Assuming all images, or at least all images of a particular class need the same event handler perhaps this would be better added as part of the conversion process rather than at an earlier stage?

I do not know why the xhtml is being generated, as the handler is of the form parent.somefunction I assume the xhtml is designed to work within an IFrame.

Hope this helps, good luck.

Joey_33




msg:3380964
 8:29 am on Jun 28, 2007 (gmt 0)

Hello,

1
If I don't process the code by h2x func, fuctions are not wrapped BUT double quotes are gone. I don't know why IE strips quotes when it sets innerHTML value to elements.

2
Actually I didn't come up the idea of adding event handlers at the conversion stage. Good idea, I'll try that just for my curiosity later on since now I have to finish the project and I'm a bit over the deadline;)

Thanks for your help again!
regards,
Konrad

daveVk




msg:3381097
 12:30 pm on Jun 28, 2007 (gmt 0)

Earlier versions of HTML (pre xhtml?) do not require atribute values to be quoted, innerHTML produces such HTML with tags in upper case and some tags lacking matching end tags, but the HTML should work Ok.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved