Sayfanın HTML kaynağını dinamik olarak nasıl değiştirebilirim?

Şimdiye kadar, bir sayfanın HTML kaynağının tamamen yeniden yüklenmeden değiştirilmesinin mümkün olmadığına inandım. Şimdiye kadar gördüğüm şeyin pushState ile ilgili olduğunu sanıyorum (ama sadece bu değil): Quartz web sitesinde (qz.com), bir sonraki makaleye geçtiğinizde URL'nin temiz bir güncellemesi ve şaşırtıcı bir şekilde güncellenmiş bir HTML kaynağıyla okuma. bir örnek içinSayfanın HTML kaynağını dinamik olarak nasıl değiştirebilirim?

, herhangi makaleye, ör .: Belki bir şey kaçırmıştım http://qz.com/643497/we-are-witnessing-the-rise-of-global-authoritarianism-on-a-chilling-scale/

aşağı kaydırma ama birisi bu nasıl yapılır açıklayabilir? Burada hangi HTML5 API'leri kullanılıyor?

NOT: Sorum özellikle (besbelli değil, DOM denetleyicisi) sayfa kaynağını görüntülerken görmüş olabilir HTML içeriğini güncellenmesi odaklanır.

kaynak

2016-03-21 Nicolas Le Thierry d' Ennequin

Tek bir sayfa uygulaması yapmak için omurga kullandıklarını düşünüyor. – httpNick

@httpNick –

dev araçlarındaki kaynaklarda omurga göremiyorum, hangi kütüphanenin kullanıldığı önemli değil. Bu XHR ve pushState kullanarak kolayca vanilya js yapılabilir ve bence bunu belirli bir kütüphane hakkında yapmamalıyız. –

Bu, normal eşzamansız içerik yüklemenize çok benziyor, ancak evet, URL'yi değiştirmek için pushState kullanıyor. Sizi aldığım şey, rotaların iyi tasarlanmış olmasıdır, böylece bu URL'ye gitmek size aynı makaleyi verir. Ancak sahnelerin ardında, sadece güzel bir akan, iyi oluşturulmuş bir belge vermek için pushState() ile birlikte bir dizi JSONP isteği vardır. Herhangi bir modern hata ayıklama konsolunun ağ sekmesini kullanarak istekleri bile doğrulayabilirsiniz.

kaynak değişiyor nasıl gerçeğine sıkışmış olduğundan

, hakkında bu şekilde düşünmek Modify the URL without reloading the page

DÜZENLEME:

url güncelleme için pushState kullanımı hakkında bilgi için bu yanıta bakın dediğimde "Güzergâhlar iyi tasarlanmış, böylece bu URL'ye gitmek size aynı makaleyi veriyor." Yani o sayfaya gitmek o makaleyi yansıtacaktır. Kaynak görüntüleyerek yaptığınız tek şey aktif URL’yi alıyor (pushState tarafından değiştiriliyor, bu yüzden kaynağı almak için gerçekten farklı bir sayfaya gidiyorsunuz) ve DOM ayrıştırma/oluşturma olmadan metni kapıyorsunuz. Umarım bu sitede özellikle neler olup bittiğini açıklar.

kaynak

2016-03-21 21:53:26

Takılmaya mı çalışıyorsunuz? Şey, hayır, sadece bir soru soruyorum. –

Üzgünüm. Ben varsayımlar yapmıyordum ya da küçümseme olmaya çalışıyordum. Nerede olduğum, bir şeyi tam olarak anlamayan daha çok şey anlamına geliyor. Örneğin. Satır içi önbelleğe alma işlemlerinin nasıl yapılacağı veya bir sihirbazın şapkadan nasıl tavşan çektiği konusunda takılmaya başlıyor. –

Bunu çoğu "modern" tarayıcıda yapabilirsiniz!

Okuduğum ilk yazı (10 Temmuz 2010'da yayınlanmıştır): (HTML5: Changing the browser-URL without refreshing page).

pushState/replaceState/popstate (akax5 Geçmiş API'si) konusuna daha ayrıntılı bir bakış için MDN belgelerine bakın.

bunu yapabilirsiniz:

window.history.pushState ("nesne veya dize", "Başlık", "/ yeni-url");

kaynak

2016-03-21 21:58:53 Thomas

Evet, pushState'in durumu kaydetmenizi sağlayan bir durum argümanı (ilk olan) vardır.Ama bu basit bir JS nesnesi, sayfa kaynağına sihirli bir şekilde yapıştırabileceğin bir şey değil! –

Sayfanın HTML kaynağını dinamik olarak nasıl değiştirebilirim?

cevap

İlgili konular