javascript - Var olan bir sayfanın DOM'unu birden fazla tarayıcı penceresine nasıl bölebilirim?

Mevcut bir sayfanın DOM yapısını alabilmeyi ve belirli öğeleri farklı tarayıcı pencereleri arasında ayırabilmeyi isterim. Bunu yaparken, bu tarayıcı pencerelerinin her birinde aynı oturumu korumak isterim. Bu mümkün mü? Ve eğer mümkünse, bunu nasıl yapabiliriz?

Daha fazla açıklık kazandırmak için, işte bunun nasıl kullanılacağına dair bir örnek:

1) Bir siteye giriş yaparım ve oturumu oluştururum.

2) Sitede sayfada çeşitli widget'lar var. Bazı widget'ları kullanmam gerekiyor, bazılarını ise kullanmıyorum. CSS ile ihtiyaç duymadıklarımı gizlemek yerine, ihtiyacım olanları ayrı pencerelere çıkarmayı tercih ederim. Böylece bu bireysel widget pencerelerini masaüstümde istediğim gibi düzenleyebilirim.

Bunu yapmanın bir yolu var mı? Teşekkürler.

Cevap #1

Bu tarayıcı pencerelerinin her birinde aynı oturumu korumak istiyorum.

Oturumlar DOM tarafından korunmaz. Çerezlerde ve belki JavaScript durumunda var olurlar.

Mevcut bir sayfanın DOM yapısını alabilmeyi ve ardından belirli öğeleri farklı tarayıcı pencerelerine ayırabilmeyi isterim.

İki seçenek vardır, DOM düğümleri adoptNode ile bir belgeden diğerine doğrudan taşınabilir, ancak bu farklı JavaScript küresel bağlamları arasında doğrudan erişim gerektirir, bu da yalnızca çerçeveler veya window.opener aracılığıyla kullanılabilir, yani bir pencere diğerini doğrudan oluşturduğunda. Dikkat edin, bu yalnızca DOM düğümlerini taşır, onlarla ilişkili herhangi bir durum veya dinleyiciyi değil.

Alternatif, onları HTML veya XML formatında seri hale getirip, seri hale getirilmiş formu postMessage veya kanallar gibi çeşitli iletişim mekanizmaları aracılığıyla başka bir pencereye göndermektir.

Sen widget'lar diyorsun, sanırım bunlarla ilişkilendirilen bazı javascript kodları var. Bu javascript, DOM düğümlerini pencere sınırları arasında taşıdığın şekilde iletişim kuracak şekilde yeniden yazılmak zorunda.

Eğer ön yüzünüz MVC veya benzeri desenler olarak uygulanmışsa, modeli doğrudan taşımak yerine modeli farklı bir pencereye taşımalı ve görünümü yeniden oluşturmalısınız.

Cevap #2

Eğer bazı sayfalar arasında farklı öğeler göstermek istiyorsanız, belki localStorage kullanarak mesajları bir tarayıcıdaki farklı sekmeler arasında paylaşmayı deneyebilirsiniz. Bir sayfa açıldığında onun için bir kimlik belirleyin ve localStorage'a kaydedin, ve her sayfa localStorage değişikliklerini dinlesin. Böylece ayarları paylaşmak için localStorage'u ayarlayarak bir pencerede neyin görüntüleneceğini kontrol edebilirsiniz.

Ama örneğin ikinci kısmı iyi bir fikir olmayabilir çünkü bir tarayıcı penceresinde çok sayıda aynı bölüm vardır, bunlar gizlenemez ve işe yaramazdır ve en üste ayarlanamazlar. Bir masaüstü uygulaması yapmak bu sorunu çözebilir ama günümüz web geliştirici yöntemlerinde normal olarak bir web sayfasında bazı widget'ları taşıyabilir veya gizleyebilirsiniz. Bu yüzden bu yolu düşünebilir veya yukarıdaki yöntemle düşüncelerinizi gerçekleştirmeye çalışabilirsiniz.

Umarım bu bir şekilde sana yardımcı olabilir.