在单独的HTML页面中的文本搜索加载到DIV

Question

因此，我没有发现在网上找到这个独特的情况，所以我现在要问。

我有一个空的DIV作为一个“容器”来保存和显示一个'外部'HTML文档。

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

在此页面的边栏中列出了用户可以从中选择的文档（HTML文档）。
有Javascript可以将选定的'external'HTML文档加载到DIV（page-content-wrapper）中。
对于该SidebarItemClick方法的代码是：

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; 
} 

这工作正常。该文档很好地显示在网页上。

注意：从代码中可以看出，由于各种原因，我没有使用iFrame--主要是因为我的老板说“NO IFRAME”。注2：即使我可以在DIV（page-content-wrapper）内的网页上看到正在显示的“外部”HTML文档 - 当我在那个时候检查Page Source时，文本'外部'HTML文档没有出现 - 尽管

现在我想放在一起的一些Javascript，使用户能够搜索该'外部'HTML文档中的文本，并滚动（如果需要）'发现'文本网页的可见部分。

正如我在开始时所说的，目前在网上找到的东西似乎没有解决这种情况，所以我希望有人有一个可行的方法。

您的意见/建议将不胜感激。

谢谢

Answer 1

这是我尝试（不成功）使用的搜索代码。注意：评论中途代码下来就如何执行：

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; 
} 

希望有人能就如何修改劝我/改变findInContent（）（搜索）代码找到用户输入的文本（以下简称“针''）在“外部”文件中。

谢谢