Link to home
Start Free TrialLog in
Avatar of bulbtree
bulbtreeFlag for Canada

asked on

Traversing object elements in DOM

For various reasons, I'm using an object element linking to a PHP file instead of using an iframe. However, when I try to access a specific element within the object's file in the way I do for iframes [document.getElementById('iframe').contentWindow.document.getElementById('target')], I can't. What's the standard way to access the DOM within the object?

Thanks in advance,
Dom
Avatar of HonorGod
HonorGod
Flag of United States of America image

I think that the problem is the use of document in the middle.
If you look at the properties of document.getElementById('iframe').contentWindow, I bet it doesn't include document.

Try it without document, i.e.,

document.getElementById('iframe').contentWindow.getElementById('target')
Avatar of bulbtree

ASKER

Unfortunately, when I plug that in, it says that 'document.getElementById('iframe').contentWindow is undefined' and quits. (I've doublechecked the ID on my object, and it's fine).
so contentWindow isn't a property of the document element with the id attribute of iframe.

I presume that it exists, right?

var iframe = document.getElementById('iframe')
if ( iframe ) {
  var text = ''
  for ( var p in iframe ) {
    text += p + '  '
  }
  alert( 'iframe properties: ' + text )
} else {
  alert( 'iframe not found.' )
}
That returns an alert with a list of iframe's properties, which I'll include as I'm sure you'll be able to draw more conclusions than I can. I noticed among the list the property .contentDocument and tried that in place of .contentWindow, but it then gives the error that .contentDocument is null. I also tried replacing it with .childNodes, which seems more promising as it actually has a node list, but .childNodes.getElementById('target') returned the error that it is not a function.

Thanks for your help so far (the function you gave me looks very useful).
iframe properties: getElementsByTagName  tabIndex  nodeName  nodeValue  nodeType  parentNode  childNodes  firstChild  lastChild  previousSibling  nextSibling  attributes  ownerDocument  insertBefore  replaceChild  removeChild  appendChild  hasChildNodes  cloneNode  normalize  isSupported  namespaceURI  prefix  localName  hasAttributes  tagName  getAttribute  setAttribute  removeAttribute  getAttributeNode  setAttributeNode  removeAttributeNode  getAttributeNS  setAttributeNS  removeAttributeNS  getAttributeNodeNS  setAttributeNodeNS  getElementsByTagNameNS  hasAttribute  hasAttributeNS  ELEMENT_NODE  ATTRIBUTE_NODE  TEXT_NODE  CDATA_SECTION_NODE  ENTITY_REFERENCE_NODE  ENTITY_NODE  PROCESSING_INSTRUCTION_NODE  COMMENT_NODE  DOCUMENT_NODE  DOCUMENT_TYPE_NODE  DOCUMENT_FRAGMENT_NODE  NOTATION_NODE  id  title  lang  dir  className  form  code  align  archive  border  codeBase  codeType  data  declare  height  hspace  name  standby  type  useMap  vspace  width  contentDocument  offsetTop  offsetLeft  offsetWidth  offsetHeight  offsetParent  innerHTML  scrollTop  scrollLeft  scrollHeight  scrollWidth  clientTop  clientLeft  clientHeight  clientWidth  contentEditable  blur  focus  spellcheck  style  removeEventListener  dispatchEvent  baseURI  compareDocumentPosition  textContent  isSameNode  lookupPrefix  isDefaultNamespace  lookupNamespaceURI  isEqualNode  getFeature  setUserData  getUserData  DOCUMENT_POSITION_DISCONNECTED  DOCUMENT_POSITION_PRECEDING  DOCUMENT_POSITION_FOLLOWING  DOCUMENT_POSITION_CONTAINS  DOCUMENT_POSITION_CONTAINED_BY  DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC  getElementsByClassName  getClientRects  getBoundingClientRect  

Open in new window

Ok, let's find out more about contentDocument...



var iframe = document.getElementById('iframe')
if ( iframe ) {
  if ( 'contentDocument' in iframe ) {
    var text = 'typeof("contentDocument") = ' + typeof( "contentDocument" ) + '  '
    var cD = iframe[ 'contentDocument' ] 
    for ( var p in cD ) {
      text += p + '  '
    }
    alert( 'contentDocument properties: ' + text )
  } else {
    alert( '"contentDocument" not in iframe' )
  }
} else {
  alert( 'iframe not found.' )
}
  var text = ''
  for ( var p in iframe ) {
    text += p + '  '
  }
  alert( 'iframe properties: ' + text )
} else {
  alert( 'iframe not found.' )
}

Open in new window

Ok, I've attached the output from the browser that gave me the most, a Firefox 2.0.0.9. A newer version of Firefox only alerted "contentDocument properties: string", and IE alerts that "'contentDocument' is not in iframe", so it looks like contentDocument won't be a cross-browser solution, but it may be a start.
contentDocument properties: string addEventListener jQuery1241616569906 nodeType nodeName getElementsByTagName defaultView getElementById documentElement body title referrer styleSheets baseURI compareDocumentPosition textContent isSameNode lookupPrefix isDefaultNamespace lookupNamespaceURI isEqualNode getFeature setUserData getUserData DOCUMENT_POSITION_DISCONNECTED DOCUMENT_POSITION_PRECEDING DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_CONTAINS DOCUMENT_POSITION_CONTAINED_BY DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC nodeValue parentNode childNodes firstChild lastChild previousSibling nextSibling attributes ownerDocument insertBefore replaceChild removeChild appendChild hasChildNodes cloneNode normalize isSupported namespaceURI prefix localName hasAttributes doctype implementation createElement createDocumentFragment createTextNode createComment createCDATASection createProcessingInstruction createAttribute createEntityReference importNode createElementNS createAttributeNS getElementsByTagNameNS ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECTION_NODE ENTITY_REFERENCE_NODE ENTITY_NODE PROCESSING_INSTRUCTION_NODE COMMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE DOCUMENT_FRAGMENT_NODE NOTATION_NODE URL images applets links forms anchors cookie close getElementsByName width height alinkColor linkColor vlinkColor bgColor fgColor domain embeds getSelection write writeln clear captureEvents releaseEvents routeEvent compatMode plugins designMode execCommand execCommandShowHelp queryCommandEnabled queryCommandIndeterm queryCommandState queryCommandSupported queryCommandText queryCommandValue characterSet dir contentType lastModified getBoxObjectFor setBoxObjectFor createEvent preferredStylesheetSet createRange createNodeIterator createTreeWalker getAnonymousNodes getAnonymousElementByAttribute addBinding removeBinding getBindingParent loadBindingDocument removeEventListener dispatchEvent inputEncoding xmlEncoding xmlStandalone xmlVersion strictErrorChecking documentURI adoptNode domConfig normalizeDocument renameNode createExpression createNSResolver evaluate

Open in new window

Right, that's what I was guessing.

So, where to next?

Do you need a "cross browser" solution?

or a "specific browser" solution?
If so, which browser?
ASKER CERTIFIED SOLUTION
Avatar of HonorGod
HonorGod
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Most importantly I need an IE solution, as that's what my clients are using. From there, hopefully a solution that works in Firefox as well. Then I'll be satisfied.
Thanks for the debugging suggestion! I'll try it.
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.