[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Calling replaceChild, works in FF, [Object error] for IE, no error msg but not working in Chromium

Posted on 2009-03-30
7
Medium Priority
?
1,845 Views
Last Modified: 2013-12-08
Dear experts,

The page is rendered in transitional mode.

In the parent page,
<body>
  ...
  <iframe id="child" src="child.html"></iframe>
  <div id="divToReplace">def</div>
  ...
</body>

In the child page,
<head>
  <script language="JavaScript">
    function fillContent() {
      var elemName = new Array("divToReplace");
      var templateElem, realContentElem;
      for (var i = 0; i < elemName.length;i++){
         templateElem = document.getElementById(elemName[i]);
         realContentElem = parent.document.getElementById(elemName[i]);
         if (realContentElem != null) try{templateElem.parentNode.replaceChild(realContentElem,templateElem);}catch(err){alert(err);}
        }
    }
  </script>
</head>
<body onload="fillContent();">
  <div id="divToReplace">abc</div>
</body>

This function gives [Object error] for IE, no error message but not working in Chromium. It only works in FF. Why?

Thanks for your help!
0
Comment
Question by:candychan611
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24016733
As I remember there was problem in direct moving elements between frames (like replaceChild, appendChild etc.)
Maybe here you will find more informations.

http://bindzus.wordpress.com/2007/12/24/adding-dynamic-contents-to-iframes/
http://www.highdots.com/forums/javascript/how-appendchild-iframes-216238.html

I also had some problems when replacing element from himself - like you have templateElem.parentNode.replaceChild. You can also try to replace it from known node.
0
 

Author Comment

by:candychan611
ID: 24017065
Thanks! They are really nice to read. Therefore can I conclude that the common way perform this task is like the following?
1. instead of replacing, create an element and copy the content from the parent.
2. try to append it from its parent node
3. remove the element in the parent page

And for "replace it from known node". Can I,
var parent = templateElem.parentNode;
parent.replaceChild(...);

Or I must,
ver parent = document.getElementById("parentId");
parent.replaceChild(...);
to totally avoid that problem?
Just curious, as I must know which is the parent node as a designer.
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24017112
Well try this second method. If it wont work - then yes you probably will need to create diffrent element for that. Its not well known problem but as you see this is more complicated than simple adding elements inside one frame/document
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 4

Expert Comment

by:jwmcpeak
ID: 24019654
This code will work in IE6, IE7, IE8, Firefox, Chrome, Opera, and I assume Safari.

There appears to be a bug in IE6 & 7 in that cloned nodes cannot be appended to another document. In the case of those two browsers, you have to recreate the element in the second document.
function fillContent() {
    var elemName = new Array("divToReplace");
    var templateElem, realContentElem;
    for (var i = 0; i < elemName.length;i++){
        templateElem = document.getElementById(elemName[i]);
        realContentElem = parent.document.getElementById(elemName[i]);
        
        if (realContentElem != null) {
            var clone;
            if (typeof Object.defineProperty !== "undefined" || typeof __defineGetter__ !== "undefined") {
                clone = realContentElem.cloneNode(true);
            } else {
                clone = copyElement(realContentElem);
                
            }
            
            realContentElem.parentNode.removeChild(realContentElem);
            templateElem.parentNode.replaceChild(clone, templateElem);
        }
    }
}
 
function copyElement(el) {
    var newEl = document.createElement(el.tagName);
    
    
    // recreate attributes
    for (var i = 0, att; (att = el.attributes[i]) != null; i++) {
        
        if (att.nodeValue) {
            var newAtt = document.createAttribute(att.nodeName);
            newAtt.nodeValue = att.nodeValue;
            el.attributes.setNamedItem(newAtt);
        }
    }
    
    // copy innerHTML   
    newEl.innerHTML = el.innerHTML;
    
    // return new element
    return newEl;
}

Open in new window

0
 

Author Comment

by:candychan611
ID: 24025225
Dear jwmcpeak,

Your code works perfectly in Firefox, Chrome (assume Safari) and should be in IE8 too (no chance to check yet). Thanks!

There is only a small problem in older IEs that need to run the copyElement function. The cloned element appended has lost all css style! This seems strange to me as we have already copied all the attributes.
0
 
LVL 4

Accepted Solution

by:
jwmcpeak earned 1000 total points
ID: 24025637
That would be, I'm assuming, because of a typo in copyElement(). I don't have IE 6 or 7 on this machine, so I can't properly test it until Tuesday morning. It should work with the revised copyElement() function below:
function copyElement(el) {
    var newEl = document.createElement(el.tagName);
    
    // recreate attributes
    for (var i = 0, att; (att = el.attributes[i]) != null; i++) {
        if (att.nodeValue) {
            var newAtt = document.createAttribute(att.nodeName);
            newAtt.nodeValue = att.nodeValue;
            // Ooops! 
            // el.attributes.setNamedItem(newAtt);
            newEl.attributes.setNamedItem(newAtt);
        }
    }
    
    // copy innerHTML   
    newEl.innerHTML = el.innerHTML;
    
    // return new element
    return newEl;
}

Open in new window

0
 

Author Closing Comment

by:candychan611
ID: 31564208
WORKS PERFECTLY!
Silly me... unable to find out this by myself,sigh!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question