Recherche de texte dans une page HTML séparée chargée dans DIV

Question

Donc, rien de ce que j'ai trouvé sur les adresses Web cette circonstance unique alors je vais demander maintenant.

J'ai un DIV vide qui fonctionne comme un "conteneur" pour contenir et afficher un document HTML 'externe'.

<div id="page-content-wrapper" style="border: medium solid #000000; height:660px"> 
     <!--Loaded content goes here--> 
</div> 

Dans la barre latérale de cette page se trouve une liste de documents (documents HTML) parmi lesquels l'utilisateur peut choisir.
Javascript est chargé de charger le document HTML 'externe' sélectionné dans la DIV (page-content-wrapper).
Le code de la méthode SidebarItemClick pour cela est:

function MenuClick(doc) { 
    var Tutorial = doc; 
    var DisplayObj = "<object id='ThisObj' type='text/html' data='" + Tutorial + "' style='min-width:100%; min-height: 101%; overflow: hidden'></object>"; 
    document.getElementById("page-content-wrapper").innerHTML = DisplayObj; 
} 

Cela fonctionne très bien. Le document est bien affiché sur la page Web.

NOTE: Comme on peut le voir dans le code, je n'utilise pas iFrame pour diverses raisons - principalement parce que mon patron a dit «NO IFRAME».

NOTE2: Même lorsque je peux voir physiquement le document HTML 'externe' affiché sur la page Web dans le DIV (page-content-wrapper) - lorsque j'examine la Source de la page à ce moment, le texte du Le document HTML 'externe' n'apparaît pas - bien que le

Maintenant, je veux mettre en place un peu de Javascript pour permettre à l'utilisateur de rechercher du texte dans ce document HTML 'externe' et de faire défiler (si nécessaire) le texte 'trouvé' vers une partie visible de la page Web. Comme je l'ai dit au début, rien de ce que j'ai trouvé jusqu'à présent sur le web ne semble résoudre cette situation, alors j'espère que quelqu'un a une approche pratique.

Vos conseils/suggestions seront grandement appréciés.

Merci

Answer 1

Voici le code de recherche que je suis en train (en vain) à utiliser. Notez les commentaires à mi-chemin dans le code sur la façon dont il exécute:

function findInContent() { 
    // Get User Input text 
    var needle = document.getElementById('txtSearch').value; 
    var n = 0; 
    var txt, i, found; 
    if (needle == "") { 
     // If nothing entered, get out 
     return false; 
    } 

    // Find next occurance of the given string on the page, wrap around to 
    // the start of the page if necessary. 
    var sourceObj = document.querySelector("#ThisObj"); 
    // NOTE: the sourceObj is found and is the ID of the 'external' document 
    var sourceBody = sourceObj.contentDocument.body; 
    // NOTE: At this point, <this> = #ThisObj 
    // and during in-house testing 
    //  <this>.data = "http://localhost6017/tutorials/Cashiering.htm" 
    // which is the dynamically loaded 'external' document. 
    // but after this everything 'falls apart' because none of the rest 
    // is defined. 
    var haystack = sourceBody.innerHTML; // This comes up empty 

    var match = haystack.indexOf(needle); 
    if (match != -1) { 
     // --- Match Found --- 
     //console.log(match); 
     var innerHTML = haystack.substring(0, match) 
      + "<span class='highlight'>" + haystack.substring(match, match + needle.length) + "</span>" 
      + haystack.substring(match + needle.length); 
     sourceBody.innerHTML = innerHTML; 
    } else { 
     // --- Match NOT Found --- 
     //console.log('Not Found'); 
    } 
    return false; 
} 

Espérons que quelqu'un peut me conseiller sur la façon de modifier/modifier le code pour trouver l'utilisateur texte saisi findInContent() (recherche) (la ' aiguille ») dans le document« externe ».

Merci