搜索多个网页 URL 并显示为 HTML

Question

我通常不是后端程序员（这就是为什么我不能真正理解编程的原因），但我被要求使用 jQuery Mobile 开发一个 ios 移动应用程序。如果有好心人愿意帮助我，将不胜感激！

我目前正在做一个搜索功能，用户应该在其中输入关键字，jquery 脚本应该搜索 60+ url 个页面（用 .aspx 编写的页面，只能运行 using intranet) 和 return links 其中包含关键字。当按下 link 时，结果应该在应用程序 window 中显示为一个简单的 html 页面（无样式或任何内容）。

我目前的思路是：

将多个页面预加载到 DOM
在 DOM
显示结果可点击 url / 静态 html

请问我的想法是否正确？我见过一些 $mobile.loadPage() , .load(), $mobile.changePage() ?, 但不知道如何实现它们/将它们连接在一起。

有什么建议可以启动/参考以更有效地启动此搜索功能吗？

非常感谢您！

Answer 1

在 this fiddle I've put together JQM's multipage template 和 ajax 调用内容中的关键字查找。

由于同源规则（javascript 对 different/same 域的访问权限）我使用 jsfiddles "echo/html"-Simulation 进行 ajax 调用。

HTML

<!-- copied from jqm's multipage template --->
<!-- Start of page: #keywords -->
<div data-role="page" id="keywords">
    <div data-role="header">
            <h1>search URLs via ajax calls</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <form>
            <label for="keywords">keyword(s) (space-separated, can be regexp):</label>
            <input id="keywords" name="keywords" value="jupiter banana content.*green">
        </form>
        <p><a href="#results" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">Show results</a>

        </p>
        <p>Possible keywords are <i>apple, banana, blue, content, end, fifth, first, for, fourth, green, is, jupiter, mars, one, orange, red, second, the, third, this, three, two, url, venus</i>

        </p>
        <p>No Keywords shows all urls.</p>
        <p>This demo uses <a href="http://doc.jsfiddle.net/use/echo.html" target="_blank">jsFiddle's /echo/html</a>
and simulated content for ajax calls, because this technique only works on either the same domain or needs cross domain allowance for URLs from other domains (see "<a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank">Cross-origin resource sharing</a>").</p>
    </div>
    <!-- /content -->
    <div data-role="footer" data-theme="a">
            <h4>end of page</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of page: #results -->
<div data-role="page" id="results">
    <div data-role="header" data-theme="b">
            <h1>Results</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <div id="resultContainer"></div>
        <p><a href="#keywords" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">close</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>end of page</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page popup -->

jQuery

// a list of urls on the same domain (here jsfiddle) because of same-origin-rules
// that's why this fiddle contains jsfiddle-ajax-simulation-urls only
var urls = [
    "/echo/html/",
    "/echo/html/",
    "/echo/html/",
    "/echo/html/",
    "/echo/html/"];

// jsfiddle-demo only: this array simulates html content from the urls
// use words from here as keywords
var simulatedDoms = [
    "<p>content for the first url</p><p>apple, banana, orange</p>",
    "<p>content for the second url</p><p>red, green, blue</p>",
    "<p>content for the third url</p><p>mars, venus, jupiter</p>",
    "<p>content for the fourth url</p><p>one, two, three</p>",
    "<p>content for the fifth url</p><p>this is the end</p>"];

$(":mobile-pagecontainer").on("pagecontainershow", function (event, ui) {

    var ap = $("body").pagecontainer("getActivePage");

    if (ap.attr("id") === "results") {

        var keywords = ui.prevPage.find("#keywords").val(),
            keywordArray = keywords !== undefined ? keywords.split(" ") : [""];

        // drop last results
        $("#resultContainer").empty();

        // traverse urls
        $.each(urls, function (urlidx, value) {
            var req = $.ajax({
                url: value,
                dataType: "html",
                // jsfiddle-demo only: just simulating page content in order to
                // produce a runnable ajax fiddle
                data: {
                    html: simulatedDoms[urlidx]
                },
                method: 'post'
            });
            // don't forget to implement "fail" or "always"
            req.done(function (data) {
                if (data !== undefined && data.length > 0) {
                    $.each(keywordArray, function (index, value) {
                        if (data.match(value)) {
                            var k = value.length > 0 ? value : "no keywords given";
                            // append one link when content matches a keyword
                            var clickableURL = "<a href='" + urls[urlidx] + "' target='_blank'>" + urls[urlidx] + " ('" + k + "', url index " + urlidx + ")" + "</a><br/>";
                            $("#resultContainer").append(clickableURL);
                        }
                    });
                }
            });
        });
    }
});

搜索多个网页 URL 并显示为 HTML

Search Multiple Webpage URL and Display as HTML

html

jquery

jquery-mobile