Solved

Traversing object elements in DOM

Posted on 2009-05-04
12
428 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
[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
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Boolean 13 51
allow link tag to be submit like form 15 60
How does GeoJson relates to Leaflet and Mapbox? 4 50
My tooltip is not displaying correct 11 20
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

710 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