所以,我真的需要一些帮助.我已经进行了大量的搜索,我发现的一些解决方案很棒但不适合我,所以这里......
当有人来到我的网站时,他们会点击一个链接,该链接会将URL传递给"recipes.html"...例如,如果他们点击"Ancho Chile Sauce",则URL将是:
blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce
此参数实际上是"食谱"文件夹中JPEG的名称,当然还有".jpg"扩展名
我需要这个参数为一个字符串,之后才和".JPG"添加"配方/",然后改变图像标签的来源我的html文件,以显示新的动态调用配方形象.
我以为我做到了这一点,但似乎没有任何效果.显然我的Javascript中出现了错误,因为我的标记工作正常,带参数的url正在通过.
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Recipes</title>
<link href="mobi-styles.css" rel="stylesheet" />
<script type="text/javascript">
function getParam ( sname )
{
var params = location.search.substr(location.search.indexOf("?")+1);
var sval = "";
params = params.split("&");
// split param and value into individual pieces
for (var i=0; i<params.length; i++)
{
temp = params[i].split("=");
if ( [temp[0]] == sname ) { sval = temp[1]; }
}
return sval;
}
window.onload = changePic();
var param = getParam("r");
var recipeName = "Recipes/"+param+".jpg"; …正如标题所述，当我使用 pushState() 更改历史记录时，它会出于某种原因将我的条目两次添加到堆栈中，即使它只单击了一次。因此，当我尝试使用后退按钮返回时，每隔一次按下该按钮我只会得到一个弹出状态。当我将状态记录到控制台时，每当我收到“pop”时，它都会显示“null”。
这就是历史的样子：
Run Code Online (Sandbox Code Playgroud)http://example.com/foo/bar/question/8/ http://example.com/foo/bar/question/8/ http://example.com/foo/bar/question/3/ http://example.com/foo/bar/question/3/ http://example.com/foo/bar/question/27/ http://example.com/foo/bar/question/27/
我想要做的是在链接点击时重新加载 iframe（并更改 h1 文本）而不重新加载整个页面，但仍然具有可遍历和可收藏的历史记录（这是一个词吗？）......似乎应该简单点，我已经浏览了 MDN 和其他教程上的示例，但无济于事。
我的代码如下。我确定我做错了什么，但任何帮助/见解将不胜感激！
$(".vidlinks a").on('click', function(e) {
var frsrc = 'https://player.vimeo.com'+$(this).attr('data-iframe')+'?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&autoplay=1',
targetUrl = $(this).attr('href'),
pgtitle = $(this).attr('title'),
obj = {url:targetUrl,ttl:pgtitle};
$("iframe").attr('src', frsrc );
$(".vidtitle h1").fadeOut("fast", function() {
$(this).text(pgtitle);
});
$(".vidtitle h1").fadeIn("fast");
window.history.pushState(obj, document.title, targetUrl);
return false;
});
window.onpopstate = function(e) {
$(".vidtitle h1").fadeOut("fast", function() {
$(this).text(e.state.ttl);
});
$(".vidtitle h1").fadeIn("fast");
}
编辑：我也尝试使用 replaceState() 而不是 pushState()。这种方式解决了重复输入问题，但使用后退按钮不会更改使用此方法的浏览器中的状态。这已经在 Chrome、Safari 和 FF 上进行了测试。
编辑 编辑：奇怪的是，如果我完全注释掉 pushState() 语句，然后单击后退按钮，iframe 将重新加载到上一个视频，但没有其他任何变化。
3（编辑）： …