文章查看器的唯一网址 [英] Unique URL for Article Viewer

问题描述

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

On my website, I have an Article Viewer page where users are allowed to search through and select articles to view. These articles are viewed in an Iframe. When an article is selected, I simply change the Iframe's src. Currently, there is no way to establish a direct link to a specific article.

例如，如果我要复制网页的网址并在其他计算机上查看，则正在查看的文章将不会显示。相反，它会显示带有空Iframe的页面。有没有一种方法可以为这些文章创建唯一的URL，以便如果我要复制URL，那么相同的文章将显示在其他位置？

For example, if I were to copy the URL of the page and view it on a different computer, the Article that was being viewed would not show. Instead, it would show the page with an empty Iframe. Is there a way that I can create unique URLs for these articles so that if I were to copy the URL, the same article will be displayed elsewhere?

这是我的html代码：

This is my html code:

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

使用Jquery UI Autocomplete（ http://api.jqueryui.com/autocomplete/ ）：

Javascript code using Jquery UI Autocomplete (http://api.jqueryui.com/autocomplete/):

$(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访问数据库并返回与搜索字符串匹配的所有结果。

article_search.php accesses the database and returns all results that match the search string.

推荐答案

这样做的一个简单方法是在URL中添加一个哈希：

An easy way of doing this is adding a hash in the url:

$(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");
    }
});

这篇关于文章查看器的唯一网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！