Question

在我的网站上，我有一个文章查看器页面，允许用户搜索并选择要查看的文章。这些文章在Iframe中查看。选择文章后，我只需更改Iframe的src即可。目前，无法建立与特定文章的直接链接。

例如，如果我要复制页面的URL并在另一台计算机上查看它，则正在查看的文章将不会显示。相反，它会显示一个空的Iframe页面。有没有办法可以为这些文章创建唯一的URL，这样如果我要复制URL，那么同一篇文章会在别处显示？

这是我的HTML代码：

<input id="article-search-textbox" class="textbox" type="text" placeholder="Article Search"></input>
<iframe id="document-viewer" src=""></iframe>

使用Jquery UI自动填充（http://api.jqueryui.com/autocomplete/）的Javascript代码：

$(document).ready(function(){
    $(function(){
        $("#article-search-textbox").autocomplete({
            source: "/functions/article_search.php",
            delay: 800,
            select: function(event, ui){
                $("#document-viewer").attr("src", "/articles/" + ui.item.value + ".pdf");
            }
        });
    });
});

article_search.php访问数据库并返回与搜索字符串匹配的所有结果。

Answer 1

一种简单的方法是在网址中添加一个哈希：

$(document).ready(function() {
    $(function(){
        $("#article-search-textbox").autocomplete({
            source: "/functions/article_search.php",
            delay: 800,
            select: function(event, ui){
                window.location.hash = ui.item.value; // <<< Hash
                $("#document-viewer").attr("src", "/articles/" + ui.item.value + ".pdf");
            }
        });
    });

    // And check if the entered url has a hash, to load the article at page loading.
    var hash = window.location.hash;
    if(hash.length) {
        $("#document-viewer").attr("src", "/articles/" + hash + ".pdf");
    }
});

Answer 2

试试这个（未经测试）：

<!-- HTML -->
<iframe id="document-viewer"></iframe><br />
<a id="article_link" href="#"></a>


/* jQuery */
$(document).ready(function(){
$(function(){
    $("#article-search-textbox").autocomplete({
        source: "/functions/article_search.php",
        delay: 800,
        select: function(event, ui){
            var article_url = "/articles/" + ui.item.value + ".pdf";
            $("#document-viewer").attr("src", article_url);
            $("a#article_link").attr({"href": document.location.hostname+article_url,"target":"_blank"}).html(ui.item.value);

        }
    });
});
});

文章查看器的唯一URL

2 个答案: