Solved

Traversing object elements in DOM

Posted on 2009-05-04
12
412 Views
Last Modified: 2012-05-06
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
0
Comment
Question by:bulbtree
  • 5
  • 5
12 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24300721
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')
0
 

Author Comment

by:bulbtree
ID: 24300792
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).
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24300827
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.' )
}
0
 

Author Comment

by:bulbtree
ID: 24301226
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

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24303681
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

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:bulbtree
ID: 24314537
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

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24314671
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?
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 420 total points
ID: 24314821
If you want "more details" about a document element, you can:

- Download the attach file (objDisplay.js), and put it in the same directory as your HTML
- Add a reference to this script file to the <head> section of your HTML
<script type='text/javascript' src='objDisplay.js'></script>
- Create an empty "debug" div at the bottom of your page
<div id='debug'></div>
- At the point in your code that you want to display details about an object, add code something like this:
  var debug = document.getElementById( 'debug' )

  var iframe = document.getElementById('iframe')

  if ( debug ) {

    debug.innerHTML += objDisplay( 'iframe', iframe )

  }

Open in new window

objDisplay.js.txt
0
 

Author Comment

by:bulbtree
ID: 24314839
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.
0
 

Author Comment

by:bulbtree
ID: 24314858
Thanks for the debugging suggestion! I'll try it.
0
 
LVL 16

Expert Comment

by:CWS (haripriya)
ID: 37212339
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now