使用 php 或 javascript 从 url 中的 shebang 检测页面

detect page from shebang in url with php or javascript

在 PHP 文件中,我使用 javascript 将 Spreadshop 应用程序集成到我的网站中。

当用户点击一篇文章时,它会使用 URL 显示文章,如下所示:

https://www.example.com/#!-A108148940

我需要从此 url ( 108148940 ) 中提取文章 ID 以使用 PHP 或 Javascript 显示图像 ( /images/108148940.jpg ),但仅如果我们当前正在查看文章页面(即在 url 中查找 #!-A)

这是我第一次被迫使用shebang。为什么没有像 $_GET['whatever'] 和 php 这样的简单方法来提取变量?

这可以通过使用 split like 函数在两种语言中完成。 Split 和 explode 将围绕一个字符拆分字符串。这样我们就可以得到第二个索引:

JavaScript

在 JavaScript、window.location.hash 中有一个非常方便的内置方法。

console.log(window.location.hash);

PHP,作为一种服务器端脚本语言,在页面加载时将无法看到该位置的哈希值;它仅对浏览器及其客户端可用。

幸运的是,您可以使用 JavaScript。这是一个完全模拟的示例:

var articleId = null;

var noArticleMsgEl = document.getElementById('no-article-msg');
var articleEl = document.getElementById('article');
var imgEl = document.getElementById('img');
var idLabelEl = document.getElementById('id-label');
var hashLabelEl = document.getElementById('hash-label');

var updateUi = function() {
  if (articleId) {
    noArticleMsgEl.style.display = 'none';
    article.style.display = 'block';
    imgEl.src = 'http://lorempixel.com/' + articleId + '/' + articleId;
    idLabelEl.innerText = articleId || 'null';
    hashLabelEl.innerText = window.location.hash || 'null';
  }
}

var handleHashChange = function() {
  var hash = window.location.hash;
  if (hash) {
    var hashMatches = window.location.hash.match(/#!-A(\d+)/)
    var newArticleId = hashMatches && hashMatches[1] || null;
    if (articleId !== newArticleId) {
      articleId = newArticleId;
      updateUi();
    }
  }
};

// Listen and execute if the hash changes
window.addEventListener('hashchange', handleHashChange);

// Execute once on page load
handleHashChange();
#no-article-msg {
  color: #444;
  text-align: center;
  padding: 10px;
}

#article {
  display: none;
  border: 1px solid #666;
  border-radius: 2px;
  text-align: center;
  padding: 10px;
}

#img {
  width: 75px;
  height: 75px;
  background: #fafafa;
}
Click One:
<a href="#!-A101">Article 101</a> | 
<a href="#!-A152">Article 152</a> | 
<a href="#!-A200">Article 200</a> | 
<a href="#!-A164">Article 164</a>

<br><br>
<div id="no-article-msg">No Article Loaded.</div>
<article id="article">
  <img id="img" /><br>
  <small><u>Current Hash:</u> <span id="hash-label"></span></small><br>
  <small><u>Current Article Id:</u> <span id="id-label"></span></small><br>
</article>

window.location.hash 应该包含您需要的信息;但是,您可以编写一个函数来接受它或一个字符串:

console.log( getArticle('https://www.example.com/#!-A108148940') );
console.log( getArticle(window.location.hash) ); // may be null


function getArticle(url) {
  var re = new RegExp(/#!\-A(\d+)$/);
  if ( re.test(url) )
    return RegExp.;
  return null;
}