Question

我正在使用onhashchange window event来检测my single page webapp的网址哈希更改。这使我可以在保留浏览器历史记录的同时触发AJAX。

用户点击锚点href =“＃hashlink”。
onhashchange检测到网址更新。
提取#hashlink并以AJAX网址（/partials/hashlink.php）传入。

我发现了一个问题。您可能已经知道，但Facebook和Twitter已经开始在应用内浏览器中启动外部链接。它似乎阻止了页面锚点href的默认操作，它已经杀死了我的哈希变化检测。因此我的webapp几乎没用： - （

Facebook和Twitter的应用程序内浏览器最近才发布，因此找到解决方案很困难。

提前致谢！

Answer 1

我知道这是一个老问题，但是昨天我遇到了同样的问题。无法找到允许我继续使用哈希链接和onhashchange事件的解决方案。我重写了代码以使用History API，即widely supported（caniuse表示它适用于Opera Mini以外的所有浏览器，但是当我测试时，它也适用于我）。

分步操作：

将所有哈希链接转换为按钮或其他某种可访问的格式（具有role =“ link”属性的div等）。（如果按钮中没有明确说明其功能的文字，请不要忘记包含aria-label属性）。

<button class="nav__list-item" data-id="${p.websafeHandle}" aria-label="Read our Q & A with ${p.name}">
    <div class="nav__list-item__img" style="background-image: url(${p.thumbnail})"></div>
    <span class="nav__list-item__handle">${p.handle}</span>
</button>

添加点击事件监听器

const qaLinks = document.querySelectorAll('.nav__list-item')
qaLinks.forEach(link => {
    link.addEventListener('click', (e) => this.loadQA(e.currentTarget.dataset.id, true))
})

单击事件处理程序以更新页面内容和浏览器历史记录

loadQA(person, updateHistory) {
    // I'm condensing/summarizing the parts of my code that deal with fetching data and
    // outputting it on the page, because it's not particularly relevant to this question. 
    const data = this.data[person]
    this.container.innerHTML = template(Templates.qaPage, data.qa)

    // the loadQA function will also be called if somebody comes to this page 
    // with a hash link like the one below. in that case (on an initial visit, 
    // instead of navigation within my single-page app), I wouldn't want to add 
    // the page to the history again, thereby creating a double entry, 
    // which is why I have the updateHistory param
    if (updateHistory) {
        // update our page title and our URL and add it to the browser history
        const title = `MTI - ${data.info.name}`
        const hash = `#/qa/${data.info.websafeHandle}`
        history.pushState(null, title, hash)
    }
}

事件处理程序，只要有人使用浏览器的前进/后退按钮就会触发
```
window.addEventListener('popstate', () => this.loadPage())
```

在popstate事件处理程序中（也将在初始页面加载时运行），获取URL哈希并相应地加载页面

loadPage() {
    if (!window.location.hash) {
        // the param here is for updateHistory
        this.showLanding(false)
    } else {
        const person = this.getHashParam()
        person ? this.loadQA(person, false) : this.showLanding(true)
    }
}

旁注：我发现this app对于在Facebook的IAB中测试我的本地代码确实很有帮助。您为它提供一个链接（例如，指向您的开发站点），它生成一个链接（您必须使用xip.io才能在FB中打开它），为您提供QR码以使用手机进行扫描，您的手机使用其开发工具，然后在浏览器中打开该链接。那么您可以复制链接，将其发布到只有您可以看到的私人FB帖子中，瞧！您可以在Facebook浏览器中访问本地服务器，而Ghostlab则使您可以访问通常在Chrome中拥有的所有开发工具。

onhashchange无法在应用内浏览器中运行（Facebook，Twitter）

1 个答案: