使用 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;
}
在 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;
}