将页面标题保存在变量中，以便在发布后可以访问 [英] Saving the page title in a variable so that it is accessible after post

问题描述

我正在尝试为我的网站创建一个快速且简单的面包屑路径。由于我的网站只有3个级别，所以最终的输出结果只能是：首页>搜索产品（多种产品类型）>产品详细信息 我试图写一个自定义面包屑。

实际上，我正在做的是捕获页面标题，并将HREF显示到页面URL。从主页进行搜索时，此功能非常出色：

主页>搜索座椅

然而，在执行搜索之后，我点击一个项目，我希望查看更多关于（我的页面执行的帖子）的详细信息，并且在详细信息页面上，我的面包屑会显示：

主页详情

我希望的是：

主页>搜索主席>主席详情

有没有办法实现这一目标？ b

当前代码：

 函数createBreadcrumb（）{
 
 alert（$（document）.find（title）。text（））; 
 
 var $ pageTitle = $（document）.find（title）。text（）; 
 var $ pageURL = $（location）.attr（'href'）; $（'。breadcrumb'）。html（（'< a href =/>主页< / a>'）+（'< a href =' + $ pageURL +'>'+ $ pageTitle +'< / a>'））; 
} 
  

****更新以下Harrys建议： *

  $（function（）{
 / *在初始页面上创建页面面包屑load * / 
 createBreadcrumb（）; 
}）; 
 
函数createBreadcrumb（oldPagePass）{
 
 if（oldPagePass！== null&&oldPagePass！== undefined）{
 
 var $ pageTitle = $（document）.find（title）。text（）; 
 var $ pageURL = $（location）.attr（'href'）; 
 
'（'。breadcrumb'）。html（oldAgePass +（'< a href ='+ $ pageURL +'>'+ $ pageTitle +'< / a>'） ）; 
} 
 else {
 alert（$（document）.find（title）。text（））; 
 
 var $ pageTitle = $（document）.find（title）。text（）; 
 var $ pageURL = $（location）.attr（'href'）; $（'。breadcrumb'）。html（（'< a href =/>主页< / a>'）+（'< a href =' + $ pageURL +'>'+ $ pageTitle +'< / a>'））; 
 
 
 
 .ajaxSuccess（function（）{
 
 var $ pageTitle = $（document）.find（title）。text （）; 
 var $ pageURL = $（location）.attr（'href'）; 
 
 var $ oldPage = $（'。breadcrumb'）。html（（'< a （< / a>'）+（'< a href ='+ $ pageURL +'>'+ $ pageTitle +'< / a>'））; 
 
 createBreadcrumb（$ oldPage）; 
}）; 
  

代码更新：

jQuery函数

  .on（'click'，'.searchResult'，function（）{
 var row = $（this）; 
 $（'＃resultForm> *'）。filter（'：input'）。each（function（index，el）{
 var name = $（el ）.attr（'name'）。slice（8）.toLowerCase（）; 
 var data = row.data（name）; 
 if（data！=='undefined'）
 $（el）.val（data）; 
}）; 
 
 $（'＃resultForm'）。submit（）; 
}）
  

搜索页面表单标记：

 < form：form method =postid =resultForm> < / form：表单> 
  

解决方案

但如果你只对这个选项感兴趣，下面的算法/伪代码会帮助你：

假设：严格的首页>搜索>详细信息结构和细节页面不能从任何地方调用，但它是相应的搜索页面）

？如果是的话， breacrumb =Home
//这是因为当它是Homepage时，面包屑永远只是Home而不需要锚，因为它会变成链接到同一页面。

是页面类型==搜索？如果是， breadcrumb =< a href ='home.htm'>主页< / a> +当前页面标题
//这是因为您的搜索页面始终是第二级别，并且第一级别始终在家。请注意，第二层没有链接，因为它实际上是当前页面。

是页面类型==详情？如果是， breadcrumb =< a href ='home.htm'>主页< / a> +< a href ='prev_page_url'>上一页标题< / a> +当前页面标题
//这是因为我们不知道上一页是什么类型的搜索页面。它可以是搜索教室或搜索表格或搜索XX。再次注意，由于上面解释的原因，第三级没有链接。因此，实际上每个页面都必须分配一个页面类型，并基于此决定显示的内容在面包屑。

现在，让我们看一个样本：

1. 用户位于主页中。 Page Type = Home so breadcrumb =首页。
。

2. 用户点击搜索主题。在搜索教室页面中，页面类型=搜索，因此面包屑应该是主页>搜索教室。查看详情。 页面类型=详细信息，因此 breadcrumb = Home>搜索椅子（来自上一页）>查看椅子详情。链接到搜索表格。 页面类型=搜索，所以 breadcrumb =首页>搜索列表。上一页的面包屑将被忽略。


3. 用户点击查看详情。 页面类型=详细信息，因此 breadcrumb = Home>搜索表格（来自上一页）>查看表格详细信息。 用户点击首页链接。 页面类型=首页，所以breadcrumb = Home 。上一页的面包屑被忽略。

这应该可以解决Sumurai8在

p>代码示例可用此处和这里。

I am trying to create a 'quick and simple' breadcrumb trail for my site. As my site will only ever have 3 levels, the final ever output could only be:

Home > Search Product (multiple product types) > Product Details

I have attempted to write a custom breadcrumb.

In effect, what I am doing is capturing the page title, and displaying that with HREF to the page URL. This works great when going from Home to perform a search:

Home > Search Chairs

However, after performing a search, and I click on an item I wish to view more detail about (my page performs a post), and once on the details page, my breadcrumb displays:

Home > Chair Details

What I was hoping for is:

Home > Search Chairs > Chair Details

Is there a way I can achieve this?

Current code:

function createBreadcrumb() {

alert($(document).find("title").text());

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
}

****Update following Harrys suggestion:*

$(function() {
    /* create page breadcrumb on initial page load */
    createBreadcrumb();
});

function createBreadcrumb(oldPagePass) {

if (oldPagePass !== null && oldPagePass !== undefined) {

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(oldAgePass + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
}  
else {
    alert($(document).find("title").text());

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
  }    
}

.ajaxSuccess(function() {

var $pageTitle = $(document).find("title").text();
var $pageURL = $(location).attr('href');

var $oldPage = $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));

createBreadcrumb($oldPage);
});

Code Update:

jQuery Function

.on('click', '.searchResult', function() {
var row = $(this);
$('#resultForm > *').filter(':input').each(function(index, el) {
    var name = $(el).attr('name').slice(8).toLowerCase();
    var data = row.data(name);
    if (data !== 'undefined')
        $(el).val(data);
});

$('#resultForm').submit();
})

Search page form tag:

<form:form method="post" id="resultForm"> </form:form>

解决方案

I wouldn't exactly recommend a JS based approach for this but if you are interested only in this option, the following algorithm/pseudo-code will help you:

Assumption: Your pages follow a strict Home > Search > Details structure and that the Details page cannot be called from anywhere but it's corresponding Search Page)

Is Page Type == Home? If yes, breacrumb = "Home" // This is because when it is Homepage, the breadcrumb is always just Home and no anchor needed because it will become a link to same page.

Is Page Type == Search? If yes, breadcrumb = "<a href='home.htm'>Home</a>" + "Current Page Title" // This is because your search page is always 2nd level and the first level is always home. Notice there is no link on the 2nd level because it actually is the current page.

Is Page Type == Details? If yes, breadcrumb = "<a href='home.htm'>Home</a>" + <a href='prev_page_url'>Previous Page Title</a> + "Current Page Title" //This is because we dont know what type of search page the previous page was. It could be Search Chairs or Search Tables or Search XX. Note again there is no link on 3rd level for reasons explained above.

So, in essence every page must be assigned a page type and based on that we decide what to show in the bread-crumb.

Now, let us see a sample:

1. User is in Homepage. Page Type = Home so breadcrumb = Home.
2. User clicks on Search for Chairs. In Search Chairs page, Page Type = Search, so breadcrumb would be Home > Search Chairs.
3. User clicks on View Details. Page Type = Details, so breadcrumb = Home > Search Chairs (from previous page) > View Chair Details.
4. User clicks on link to Search for Tables. Page Type = Search, so breadcrumb = Home > Search Tables. Previous page's breadcrumb is ignored.
5. User clicks on View Details. Page Type = Details, so breadcrumb = Home > Search Tables (from previous page) > View Table Details.
6. User clicks on Home link. Page Type = Home, so breadcrumb = Home. Previous page's breadcrumb is ignored.

This should overcome the issue that Sumurai8 had mentioned in this thread also.

A code sample is available here and here.

这篇关于将页面标题保存在变量中，以便在发布后可以访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！