相关疑难解决方法(0)

我正在使用Ajax和hash进行导航.

有没有办法检查是否window.location.hash改变了这样？

http://example.com/blah #123到http://example.com/blah #456

如果我在文档加载时检查它,它可以工作.

但是如果我有基于#hash的导航,那么当我按下浏览器上的后退按钮时它就不起作用了(所以我从#456跳到了#123).

它显示在地址框内,但我无法用JavaScript捕获它.

在修改历史状态时是否可以订阅某些事件？怎么样？

我正在开发Chrome扩展程序以调整Facebook.然而,支持HTML5的网站,如Facebook内醒目浏览行为要求的覆盖window.history.pushState解释在这太问题.

不幸的是,Chrome的孤立世界似乎阻止了这种覆盖.有没有其他方法来捕捉历史变化(除了民意调查document.location.href)？

问题很简单.在应用程序中,我们希望跟踪显示的当前URL.为此,我们使用shouldOverrideUrlLoading回调来WebViewClient保存url到每个更新的类字段.这是相关代码:

    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setDomStorageEnabled(true); 
    mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            mCurrentUrl = url;

            // If we don't return false then any redirect (like redirecting to the mobile
            // version of the page) or any link click will open the web browser (like an
            // implicit intent).
            return false;
        }



        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            ...
        }
    });
    mWebView.loadUrl(mInitialUrl);

但是,至少有一种情况,即回调永远不会被触发,并且mCurrentUrl字段不会更新.

网址:https://m.pandora.net/es-es/products/bracelets/556000

上次更新的URL(在单击产品时永远不会调用shouldOverrideUrlLoading):https://m.pandora.net/es-es/products/bracelets

我尝试过像onPageStarted()这样的回调,但是url也被过滤了,因为它的受保护代码似乎没有可访问的上游. …

我正在制作一个简单的Chrome扩展程序,以在YouTube播放列表中添加每个视频的长度,并在页面中插入总长度.我已经成功了,但我的脚本仅在刷新页面后才起作用,但在网站导航时却不起作用.但这不是很方便.

是否有可能在Youtube上检测页面导航并在浏览器中呈现之前将HTML插入到页面中,以便立即显示添加的内容而不会有任何延迟并且不需要刷新页面？

示例链接:https://www.youtube.com/playlist？list = PL_8APVyhfhpdgMJ3J80YQxWBMUhbwXw8B

PS我的问题与在greasemonkey脚本中显示后立即修改元素(不是在页面完全加载后)后的问题不同？因为我已经尝试过MutationObserver并且问题是相同的 - 需要刷新才能显示对网页的更改:

var observer = new MutationObserver(function(mutations) {
    for (var i=0; i<mutations.length; i++) {
        var mutationAddedNodes = mutations[i].addedNodes;
        for (var j=0; j<mutationAddedNodes.length; j++) {
            var node = mutationAddedNodes[j];
            if (node.classList && node.classList.contains("timestamp")) {
                var videoLength = node.firstElementChild.innerText;
                observer.disconnect();    

                var lengthNode = document.createElement("li");
                var lengthNodeText = document.createTextNode(videoLength);
                lengthNode.appendChild(lengthNodeText);
                document.getElementsByClassName("pl-header-details")[0].appendChild(lengthNode);

                return;
            }
        }
    }
});
observer.observe(document, {childList: true, subtree: true});

我的Google-fu什么都没有.

当你这样做:

var stateObj = { state: "some state" };
history.pushState(stateObj, "page 2", "other.htm");

是否有关联的窗口回调？

我知道有这个:

window.onpopstate = function() {

}

当用户点击后退按钮时,这非常适合收听.但是,我想在任何时候听到URL的变化,我不知道该怎么做.

URL随时更改时是否存在全局回调？

我有一个用户脚本(用于Chrome),我用它来为我设计duolingo的练习页面.它只应用了一行css

jQ(document).ready(function(){
    jQ('#start-button').css({"float": "left", "margin-right": "10em"});
});

这是我第一次来到页面时工作得很好.但他们使用Ajax来避免页面重新加载.并且url 确实发生了变化,因此如果我检测到这一点,我可以刷新css更改而不会丢失此网站导航模式的格式.

有人碰巧知道检测它的好方法吗？

编辑:完整的用户脚本实现了几个首先指出的流行解决方案(这是行不通的):

// ==UserScript==
// @name         duolingo
// @namespace    http://your.homepage/
// @version      0.1
// @description  reformat /skills to not start timed practice by default
// @author       You
// @include      /^https?\:\/\/www\.duolingo\.com\/(skill|practice)?\/?.*/
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @grant        none
// ==/UserScript==

window.jQ=jQuery.noConflict(true);

jQ(document).ready(function(){
    style_duolingo();
});
jQ(window).bind('hashchange', function() {
    style_duolingo();
});
jQ(document).ajaxComplete(function() {
    style_duolingo();
});


function style_duolingo() {
    jQ('#start-button').css({"float": "left", "margin-right": "10em"});
    console.log("Tampermonkey script: wrote css change");
}

编辑#2:

赏金奖励

请提供一个不加载外部库的工作解决方案(我想知道我缺少什么,而不是将其保存在黑盒子中),并使用事件解决问题(没有基于间隔的解决方案).如果无法使用事件(奇怪),请提供更正解决方案以及未触发事件的原因.

我有一个用TypeScript编写的React应用程序（16.8.6），该应用程序使用React Router（5.0.1）和MobX（5.9.4）。导航正常运行并应在适当的时候加载数据，但是，当我单击浏览器的“后退”按钮时，URL会更改，但不会更新任何状态，并且页面也不会重新呈现。我已经阅读了有关此问题和withRouter修复的无数文章，我尝试了这些文章，但没有什么不同。

一个典型的用例是导航到摘要页面，选择导致加载新数据和推送新历史记录状态的各种操作，然后再返回几个步骤。大多数历史记录推送都发生在摘要组件中，该组件处理多个路由。我已经注意到，当从摘要页面返回到主页时，将按应有的方式进行重新渲染。

我的index.tsx

import { Provider } from 'mobx-react'
import * as React from 'react'
import * as ReactDOM from 'react-dom'

import App from './App'
import * as serviceWorker from './serviceWorker'
import * as Utils from './utils/Utils'

const rootStore = Utils.createStores()

ReactDOM.render(
    <Provider {...rootStore }>
        <App />
    </Provider>,
    document.getElementById('root') as HTMLElement
)

serviceWorker.unregister()

我的app.tsx

import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { Route, Router, Switch } from 'react-router'

import Home from './pages/Home/Home' …

我正在寻找一种解决方案来注册路线更改并state使用setState和应用新的useEffect。下面的当前代码不会更新setState更改路线时的功能。

例如，我注册pathname的/与location.pathname === '/'内createContext，如果pathname是/所述setState的isHome被登记true，但是如果pathname是/page-1 setState被登记false。

在浏览器重新加载，onMount将state使用正确设置，但在路线改变Link这个没有。另外，请注意，我正在使用 Gatsby 并在这样做时导入{ Link } from 'gatsby'

创建上下文.js

export const GlobalProvider = ({ children, location }) => {


const prevScrollY = useRef(0);
  const [state, setState] = useState({
    isHome: location.pathname === '/',
    // other states
  });

  const …

我注意到,当您点击其网站上的链接/视频时,YouTube实际上并未重新加载.如果您在控制台中定义一个变量,您将看到它将保持不变.

但既popstate不会也不会beforeunload被解雇.那么Youtube是如何实现这一目标的呢？如何在不定时检查URL栏的情况下检测该URL更改.

window.onpopstate = function(event) {
  console.log('popstate test!')
  return "test"
}

window.onbeforeunload = function(event) {
  console.log('beforeunload test!')
  return "test"
}

我不只是在寻找YouTube解决方案,我正在寻找涵盖YouTube正在使用的技术的通用解决方案.