На моем веб-сайте у меня есть страница просмотра статей, где пользователям разрешено искать и выбирать статьи для просмотра. Эти статьи рассматриваются в Iframe. Когда выбирается статья, я просто изменяю src iframe. В настоящее время невозможно установить прямую ссылку на конкретную статью.
Например, если бы я должен был скопировать URL-адрес страницы и просмотреть ее на другом компьютере, статья, которая просматривалась, не будет отображаться. Вместо этого он покажет страницу с пустым Iframe. Есть ли способ создать уникальные URL-адреса для этих статей, чтобы, если бы я должен был скопировать URL-адрес, эта же статья будет отображаться в другом месте?
Это мой html-код:
<input id="article-search-textbox" class="textbox" type="text" placeholder="Article Search"></input> <iframe id="document-viewer" src=""></iframe> Javascript-код с использованием автозаполнения JQuery UI ( 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 обращается к базе данных и возвращает все результаты, соответствующие строке поиска.
Легкий способ сделать это – добавить хэш в 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"); } });
Попробуйте это (непроверено):
<!-- 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); } }); }); });