Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1888
  • Last Modified:

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

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
candychan611
Asked:
candychan611
  • 3
  • 2
  • 2
1 Solution
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
 
candychan611Author Commented:
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
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
jwmcpeakCommented:
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
 
candychan611Author Commented:
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
 
jwmcpeakCommented:
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
 
candychan611Author Commented:
WORKS PERFECTLY!
Silly me... unable to find out this by myself,sigh!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now