How to get next text element of iframe on click each time?

Question

I have an iframe and by clicking on any of its content , css class is applied on it (say "selected"). After that

when next button is clicked, it should apply this class on next element that contains text

and return the text. Traversing should be text node based. Though i did tried to do something very ugly but i guess there must some simple solution available.

Here is my code:

$(function(){
$('#next').click(function(){
    var current_segment =$('#my_iframe').contents().find(".highlight");

    // if current segment has children
    if($(current_segment).children().not('.traversed_already').length > 0){
        $(current_segment).children().not('.traversed_already').first().addClass('highlight');
        $(current_segment).removeClass('highlight');

        // add class to stop repitative traversing
        $(current_segment).addClass('traversed_already');
    //                                                return false;

    // if has siblings and no children
    }else if($(current_segment).siblings().not('.traversed_already').length > 0 
        && $(current_segment).children().not('.traversed_already').length <= 0){
        $(current_segment).siblings().not('.traversed_already').first().addClass('highlight');
        $(current_segment).removeClass('highlight');

        // add class to stop repitative traversing
        $(current_segment).addClass('traversed_already'); 
    //                                                return false;

    // if no siblings and no children
    }else if($(current_segment).siblings().not('.traversed_already').length == 0 && 
        $(current_segment).children().not('.traversed_already').length == 0){

        // check the very first parent if traversed check its siblings
        var parent_segment = $(current_segment).parent().first();

        // if parent is already traversed already
        if($(parent_segment).hasClass('traversed_already')){

            // if parent is traversed but parent has sibling that is untraversed
            if($(parent_segment).siblings().not('.traversed_already').length > 0){
                $(parent_segment).siblings().not('.traversed_already').first().addClass('highlight');
                $(parent_segment).removeClass('highlight');

                // add class to stop repitative traversing
                $(parent_segment).addClass('traversed_already');
            //                                                        return false;
            // if no untraversed sibling then search for parent(s)
            }else{
                // Look for the parent in Dom tree which is not traversed
                $(parent_segment).parents().not('.traversed_already').first().addClass('highlight');
                $(parent_segment).removeClass('highlight');

                // add class to stop repitative traversing
                $(parent_segment).addClass('traversed_already');
            //                                                        return false;
            } // end of if traversed parent has siblings(untraversed).

        // if parent is not traversed
        } else {
            $(parent_segment).addClass('highlight');
            $(current_segment).removeClass('highlight');

            // add class to stop repitative traversing
            $(current_segment).addClass('traversed_already');
        } // end of if parent is already traversed or not

    //                                                return false;
    } // end of else if no siblings and no parents

Problem with this Code is:

It just traverse the next element by seeing the child first and then siblings and then parents siblings but it fails when there comes parents > parents > parents siblings.

Note : i believe this can be done through DOM traversing very easily but i am not able to hit the right solution.

Answer 1

Here's a minimal DOM traversal script. I don't know if it's the very best, or the most minimal, but I'm pretty sure it's working (only browser testing, but seems solid).

getNextElement = function(element, goingUp) {
  if (element.firstChild && !goingUp){
    return element.firstChild;
  }
  else if (element.nextSibling){
    return element.nextSibling;
  }
  else if (element.parentNode) {
    return arguments.callee(element.parentNode, true);
  }
};

This will actually hit text nodes as well as others. I think you could actually make use of that. But if you only want elements, just change firstChild to firstElementChild and nextSibling to nextElementSibling. Although that won't be supported by IE8 or less. Try it out by running element = getNextElement(document.getElementsByTagName('body')[0]) and then running

if (element.style){element.style.backgroundColor = 'yellow'};
element = getNextElement(element);

repeatedly to walk (and highlight) the DOM.

Answer 2

The simplest solution was the DOM TreeWalker, my luck that it took me too long to figure that out.

Here is the link to it. Hope it will help someone facing the same problem and instead of speding hours or days it will help them right away.

Answer 3

I'm not sure how complicated the markup is of your iframe so I'm using some I've quickly created myself.

Firstly, click on an element to note your starting position - the element will be highlighted - then click the 'Next' button and the code will run highlighting the next element it finds. Once all elements have been highlighted, nothing more will happen. Depending on how well nested your elements are depends on whether the code will see an element and highlight it. All the time what has been found will be visible in the console window and given a class of 'selected'.

I know you asked for a text node based solution but I 'think' this could work. Try it and see anyway.

iframe.html:

<html>
<head>
<title>iFrame</title>
</head>
<body>
<ul>
<li><abbr title="Cascading Style Sheets">CSS</abbr> (an abbreviation; <code>abbr</code> markup used)</li>
<li><acronym title="radio detecting and ranging">radar</acronym> (an acronym; <code>acronym</code> markup used)</li>
<li><b>bolded</b> (<code>b</code> markup used - just bolding with unspecified semantics)</li>
<li><big>big thing</big> (<code>big</code> markup used)</li>
<li><cite>Origin of Species</cite> (a book title; <code>cite</code> markup used)</li>
<li><code>a[i] = b[i] + c[i);</code> (computer code; <code>code</code> markup used)</li>
<li>here we have some <del>deleted</del> text (<code>del</code> markup used)</li>
<li>an <dfn>octet</dfn> is an entity consisting of eight bits (<code>dfn</code> markup used for the term being defined)</li>
<li>this is <em>very</em> simple (<code>em</code> markup used for emphasizing a word)</li>
<li><i lang="la">Homo sapiens</i> (should appear in italics; <code>i</code> markup used)</li>
<li>here we have some <ins>inserted</ins> text (<code>ins</code> markup used)</li>
<li><q>Hello!</q> (<code>q</code> markup used for quotation)</li>
<li>He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li>
<li><small>this is not that important</small> (<code>small</code> markup used)</li>
<li><strike>overstruck</strike> (<code>strike</code> markup used; note: <code>s</code> is a nonstandard synonym for <code>strike</code>)</li>
<li><strong>this is highlighted text</strong> (<code>strong</code> markup used)</li>
<li>In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup><i>x</i>, and some nested superscripts (exponents) too: e<sup>x<sup>2</sup></sup> and f(x)<sup>g(x)<sup>a+b+c</sup></sup> (where 2 and a+b+c should appear as exponents of exponents).</li>
<li><u>underlined</u> text (<code>u</code> markup used)</li>
<li>the command <code>cat</code><var>filename</var> displays the file specified by the <var>filename</var> (<code>var</code> markup used to indicate a word as a variable).</li>
</ul>
</body>
</html>

demo.html:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$(document).ready(function(){
    $('#iframe').load(function(){
        $all = $('#iframe').contents().find('body *').filter(function(){
            var $this = $(this);
            return $this.children().length == 0 && $.trim($this.text()).length > 0;
        });         

        $('#next').on('click', highlightTextNode);
        $('#iframe').contents().find('body').on('click', highlightTextNode);
    });

    var highlightTextNode = function(event){
        event.stopPropagation();
        $el = $(event.target).children().length == 0 ? $(event.target) : $(event.target).find(':first-child').first();

        if(!$el.hasClass('selected') && $.trim($el.text()).length > 0 && $('#iframe').contents().find('body').find('.selected').length == 0){
            $el.addClass('selected').css({backgroundColor: 'yellow'});
            console.log($.trim($el.text()));
        } else {
            var found = false;
            var finished = false;

            $all.each(function(){
                finished = true;

                if(found && !$(this).hasClass('selected')){
                    found = false;
                    $(this).addClass('selected').css({backgroundColor: 'yellow'});
                    console.log($.trim($(this).text()));
                    finished = false;
                    return false;
                }

                if($(this).hasClass('selected'))
                    found = true;
            });

            if(finished){ //start at the beginning again
                $all.each(function(){                   
                    if(found && !$(this).hasClass('selected')){
                        found = false;
                        $(this).addClass('selected').css({backgroundColor: 'yellow'});
                        console.log($.trim($(this).text()));
                        return false;
                    }

                    if($(this).hasClass('selected'))
                        found = true;                   
                });
            }
        }
    }       
});
</script>
</head>
<body>
<input type="button" value="NEXT" id="next" />
<iframe id="iframe" src="iframe.html" width="100%" height="100%"></iframe>
</body>
</html>

Answer 4

Why don't You use some while function like

$(function(){
$('#next').click(function(){
    var current_segment =$('#my_iframe').contents().find(".highlight");
    var doWhile = true; // variable that will determine that You have to go again trough the loop
    while (doWhile){
       ... // Your code
       // Every time where You put
          // add class to stop repitative traversing
          $(element).addClass('traversed_already');
      // give also
          doWhile = false; // to stop while function
      // of course return will take You out as well
    }

It should work.

Answer 5

The solution below should meet your goals.

Notes:

• It uses some newer browser/JS features, so you may have to port it to jQuery or similar for cross-browser compatibility.
• It computes the full list of text nodes up front, so it will only work if your iframe DOM is static.
• It traverses all text nodes, not all elements that contain text. That is, for the HTML <div id="a">1<div id="b">2</div>3</div>, it will select 1 then 2 then 3 rather than a then b. I believe this is what you're asking for, but it wasn't 100% clear.
• I haven't tested it.

The code:

// First grab the iframe's document object.
var iframeDocument = document.querySelector('iframe').contentDocument;

// Then generate the list of all text nodes in the iframe.
var textNodes = [];
function findTextNodes(curElem){
    Array.prototype.slice.apply(curElem.childNodes).forEach(function(childNode) {
        switch (childNode.nodeType) {
            case Node.TEXT_NODE:
                textNodes.push(childNode);
            case Node.ELEMENT_NODE:
                findTextNodes(childNode);
        }
    }, this);
}
findTextNodes(iframeDocument.body);

// Helper function to move the text node selection.
function selectTextNodeAtIndex(index){
    if (index > 0) {
        // Replace the old .selected wrapper with the original text node.
        var oldWrapperElem = iframeDocument.querySelector('.selected');
        oldWrapperElem.parentNode.replaceChild(textNodes[index - 1], oldWrapperElem);
    }

    // Replace the current text node with a .selected wrapper.
    var wrapperElem = iframeDocument.createElement('span');
    wrapperElem.classList.add('selected');
    wrapperElem.textContent = textNodes[index].textContent;
    textNodes[index].parentNode.replaceChild(wrapperElem, textNodes[index]);
}

// Finally, select the first text node and set up the click handler.
var curIndex = 0;
selectTextNodeAtIndex(curIndex);
document.querySelector('#next').addEventListener('click', function () {
    curIndex++;
    selectTextNodeAtIndex(curIndex);
}, true);