时间戳

首页 > 解决方案 > 单击链接并加载新页面后，我该如何运行功能？

javascript - 单击链接并加载新页面后，我该如何运行功能？

问题描述

我正在使用cordova制作一个混合应用程序，目前当用户使用搜索功能时，会返回一个可点击的搜索结果列表，并在每个结果中突出显示用户搜索查询。问题是当用户点击结果并将他们带到所述书中搜索查询的确切位置时，我无法弄清楚如何运行我的突出显示功能以突出显示新加载页面上的搜索查询？这里是 Javascript 的新手，我希望我清楚我想说什么。这是问题的屏幕录像https://osaintilien55-gmail.tinytake.com/tt/NDU0MzA5OF8xNDQwMDE2Ng。我将 Lunr.js 用于搜索功能，将 Mark.js 用于突出显示。

这是我的代码中的搜索功能

 //Add Event Listener to Search button
document.querySelector(".search-btn").addEventListener('click', searchFunction);

function searchFunction() {
    //Clear List
    document.querySelector(".results-wrapper").innerHTML = '';

    //Store query
    var searchQuery = document.querySelector("#search-id").value;

    // returns all documents which contain query
    var results = idx.search(searchQuery);

    var searchResults = results.forEach(function (entry) {

            documents.find(findText);

            function findText(doc) {
                let re = new RegExp(searchQuery, 'i');
                console.log(re);
                if (doc.name == entry.ref && doc.text.match(re)) {
                    //and if entry.text contains search query
                    //Break up string into sentences
                    var sentences = doc.text.match(/[^\.!\?]+[\.!\?]+/g);
                    console.log(doc.text);
                    console.log(sentences);
                    //              console.log("Page " + doc.page + " has the word " + searchQuery + " " + doc.text.search(re));
                    sentences.forEach(function (sentence) {
                        if (sentence.match(re)) {
                            var anchor = document.createElement('a');
                            anchor.className = 'anchorSearchResult'
                            anchor.href = doc.href;

                            //Create "div" element
                            var div = document.createElement('div');
                            div.className = 'div-test'

                            //Creates "h4" element for title
                            var h4 = document.createElement('h4');
                            var title = document.createTextNode(doc.name);
                            h4.className = 'title-results';

                            //Creates "p" element for sentence 
                            var textElement = document.createElement(p);
                            var searchResult = document.createTextNode(sentence);
                            textElement.className = "text-results";

                            //Creates "p" element for page 
                            var p = document.createElement('p');
                            var pageResult = document.createTextNode(doc.page);
                            p.className = "page-results";

                            h4.appendChild(title);
                            textElement.appendChild(searchResult);
                            p.appendChild(pageResult);

                            div.appendChild(h4)
                            div.appendChild(textElement)
                            div.appendChild(p)

                            anchor.appendChild(div)

                            document.querySelector(".results-wrapper").appendChild(anchor);

                            // Highlight Function
                            var instance = new Mark(document.querySelector(".results-wrapper"));
                            instance.mark(searchQuery, {
                                "element": "span",
                                "className": "highlight"
                            })
                        }
                    })
                }
            }

            
            //listen for Click event on searchResult list
            //onWindowsLoad run Highlight function
            //Highlight Function on search query word
            //Pass id Query Selector of search query
            //Highlight each instance of search query in Id's content
        }
        )}

标签： javascript

解决方案

您可以使用查询字符串。例如，函数的参数存储在名为 的查询字符串中params。

您可以读取查询字符串。然后JSON.parse()在查询字符串上使用。然后使用 ES6 扩展运算符 ( ) 使用解析后的数组运行函数...。

例子：

var params = new URLSearchParams(window.location.search) // Create a URLSearchParams object

function myFunction(a, b, c) {
    alert(a + ' ' + b + ' ' + c)
}

myFunction(...JSON.parse(params.get('params'))) // Run function with parsed params

示例- 尝试更改名为params. 如果您使用字符串，请使用双引号，因为 JSON 需要双引号，而我们正在使用JSON.parse()

查询字符串必须是一个数组。例如：

[1, 2, 3]
["One", "Two", "Five"]
[[], [], []]

推荐阅读