Question

我有一个网页，我的侧边栏链接将导致“外部”链接。要加载到内容div中的HTML文档但是，在成功加载并显示后，加载的HTML内容不会出现在页面源中无论如何，我现在需要对客户端的文本搜索进行外部＆＃39;使用Javascript函数的HTML文档。

我的网页如下所示：

“搜索”文本框和按钮位于＆＃39;外部＆＃39;内容区（以红色为界）。

并且，当其中一个链接的HTML文档出现在屏幕上时，页面源代码如下：

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

请注意＆＃39;已加载＆＃39; HTML文档未显示。

我找到了一个看起来很有前途的Javascript函数findInPage（），但它没有找到＆＃39; loading＆＃39; HTML文档及其文本。

// =====================================
function findInPage() {

    var str = document.getElementById("ButtonForm").elements["txtSearch"].value;
    var n = 0;
    var txt, i, found;
    if (str == "")
        return false;

    // Find next occurance of the given string on the page, wrap around to the
    // start of the page if necessary.
    if (window.find) {
        // Look for match starting at the current point. If not found, rewind
        // back to the first match.
        if (!window.find(str)) {
            while (window.find(str, false, true))
                n++;
        } else {
            n++;
        }
        // If not found in either direction, give message.
        if (n == 0)
            alert("Not found.");
    } else if (window.document.body.createTextRange) {

        txt = window.document.body.createTextRange();
        // Find the nth match from the top of the page.
        found = true;
        i = 0;
        while (found === true && i <= n) {

            found = txt.findText(str);
            if (found) {
                txt.moveStart("character", 1);
                txt.moveEnd("textedit");
            }
            i++;
        }
        // If found, mark it and scroll it into view.
        if (found) {
            txt.moveStart("character", -1);
            txt.findText(str);
            txt.select();
            txt.scrollIntoView();
            n++;
        } else {
            // Otherwise, start over at the top of the page and find first match.
            if (n > 0) {
                n = 0;
                findInPage(str);
            }
            // Not found anywhere, give message. else
            alert("Not found.");
        }
    }
    return false;
}

是否有某种方法可以修改功能和/或使用不同的功能，以便它可以找到“已加载的”功能。 HTML文档并搜索输入的文本？

Answer 1

尝试选择div by id而不是阅读整个窗口......

document.getElementById('page-content-wrapper').find(str)

Answer 2

这是How to get html elements from an object tag?的副本。

答案在于用document.getElementById（'page-content-wrapper'）。contentDocument替换window.document的所有实例，以便搜索到的文档是页面文档。

但是，你在那里的搜索功能相当破碎，它取决于window.find搜索窗口而不是搜索文档文本。

您可以构建更好的搜索功能：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Wrapper</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    Body Here
    <object id="page-content-wrapper" type="text/html" data="about.html" name="content"></object>
        <input id="txtSearch" placeholder="Search..." />
        <button onclick="findInPage()">Search</button>
    <script>
        function findInPage() {
            var needle = document.getElementById('txtSearch').value;
            var haystack = document.getElementById('page-content-wrapper').contentDocument.body.innerHTML;
            var match = haystack.indexOf(needle);
            if(match != -1) {
                console.log(match);
            } else {
                console.log('Not Found');
            }
        }
    </script>
    </body>
</html>

使用您要加载和搜索的任何内容填写about.html。

请注意，这只是记录匹配的索引。它不会将其滚动到视图中或选择它。有了更多的javascript，你可以做到这些。你只需要通过document.getElementById（'page-content-wrapper'）。contentDocument.body

Answer 3

我终于找到了如何访问Object的innerHTML的HTML内容点击特定的侧栏链接，使用Javascript，我构建其对象。

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

但是现在我已经向对象添加了一个ID（'ThisObj'）。

现在定义了该ID，我能够“深入”到该Object以获得其innerHTML。

var sourceObj = document.querySelector("#ThisObj");
var sourceBody = sourceObj.contentDocument.body
var haystack = sourceBody.innerHTML;

var match = haystack.indexOf(needle);
if (match != -1) {
  // --- Text match found ---
} else {
  // --- Text match NOT found ---
}

我仍然需要创建Javascript以突出显示“找到”文本并将其滚动到视图中，但我会在单独的帖子中提出该问题。

感谢您的建议/意见。

在已加载的HTML文档中搜索文本

3 个答案: