Biz kullanabilirsiniz window.location.replaceiçin , önlemek tarih ve hedefe Sayfada çapa , sayfayı yeniden olmadan ama değil iframe'lerinde?

Sorun, durumların etkinleştirilmesi gereken bir CSP (içerik güvenliği politikası) ihlalidirscript-src 'unsafe-inline' . Dışında bir CSP tanımlamam dışında bir tanesini tanımlayıp izin versem script-src 'unsafe-inline'de yine de aynı ihlal hatası veriyor. İe11 / chrome / ff ile aynı sonuç.

Aynı alandaki iframe (aynı dizinde).

1. Konsoldaki iframe'i hedefleyin ve konsolda kullanın window.location.replace('/samepage.html#onpage_anchor').
2. işe yarıyor. Sayfayı yeniden yüklemeden ve geçmiş olmadan sayfa çapasını hedefler.
3. Aynı kodu bağlantı bağlantılarına satır içine koyun ve çalışır.
4. Aynı kod kullanın , dış komut almak csp ihlali hatası. Bir iframe içinde değilse bu iyi çalışır.

Eyleme izin vermek için bir CSP oluşturmaya çalıştım , ancak mümkün olan en izin verici içerik güvenliği politikaları bile buna izin vermeyecekti.

Düzenleme: böylece ben üst / alt sayfalar referans uygun hrefs kullanabilirsiniz böylece birden çok dosya izin plunker örnekler koymak .

Dalma piston örnekleri hakkında notlar:

1. Sorun bu örneklerde yeniden oluşturulmaz. Komut dosyası iframe'de bile mükemmel çalışır. Ancak, aynı kod yerel sunucumda çalışmıyor veya bir VPS'de canlı olarak çalıştırdığımda.

2. Ben CSP ihlalinin dalgıç üzerinde tetiklenmediğinden şüpheleniyorum çünkü dalgıç tarayıcıya bir tür soyutlama katmanı aracılığıyla içerik sunuyor.

3. Üst öğedeki akordeon bağlantılarını ilk tıklattığınızda yenileme işlemi gerçekleşir. Bunun nedeni, sayfanın başlangıçta yükleme biçiminin index.html'ye başvurmamasıdır. Sonraki tıklamalar, sayfa yeniden yüklenmeden beklendiği gibi çalışır. Başlangıçta child.html'ye başvurduğu için iframe'de sorun değil

4. Bunlar, kodu çalışmasını sağlamak için değişiklik gerektirmeden göstermek için iyi örneklerdir (aşağıda belirtilen yığın akışı snippet'lerinde çalışması için hrefleri değiştirme ihtiyacında olduğu gibi). Javascript'i olması gerektiği gibi çalıştığı için de iyidir. Ama asıl problemi göstermiyor. Gerçek sorunu görmek için hala düzenleyicinize yüklemeniz ve yerel bir sunucuda veya canlı barındırma ortamında çalıştırmanız gerekir.

Plunker Örnekleri

Senaryo ile: Tarihsiz
Senaryo olmadan: Tarihle

Basitleştirilmiş kod örneği

Tek girişli basit akordeon. Sorunu yeniden üretmek için yeterli.

Aç / kapat'ı tıklamak akordeonu genişletir / daraltır, JS gerekmez. JS tamamen aynı şeyi yapmalı ama tarihsiz. İyi çalışır, ancak bir iframe içinde değil.

Kod pasajı notları:

1. Tanımladığım şey hakkında bir fikir edinmek için snippet'i çalıştırabilirsiniz, ancak aslında sorunu göstermez.

2. Parçacık gerçek bir tarayıcıda olduğu gibi davranmaz, javascript çalışmaz.

3. Parçacık kodu gösterir, ancak sorunu görmek için bir iframe içinde çalıştırılmalıdır. Farkı ve nasıl çalışması gerektiğini görmek için iframe'in dışında çalıştırın .

4. Bağlantılar (tüm url değiştirme) JS nasıl çalıştığının Çünkü aslında gerekir böyle olması href="https://stackoverflow.com/thispage.html#ac1"yerine sadece daha href="#ac1"onlar pasajı göründükleri gibi (snippet'te fiili html sayfası hedef olamaz). Bu yüzden bunu düzenleyicinizde denerseniz (lütfen yapın), o zaman bu sayfadaki bağlantılarıthis_document.html#anchor yine de aynı sayfa bağlantıları olacak şekilde değiştirmeyi unutmayın , ancak page.html bağlantıya eklenir.

$(document).ready(function() {

  // anchor links without history
  $.acAnch = function(event) {
    event.preventDefault();
    var anchLnk = $(event.target);
    var anchTrgt = anchLnk.attr('href');
    window.location.replace(anchTrgt);
  }
  // listen for anchor clicks
  $('.accordion').on('click', 'a', $.acAnch);

});

div#sample.example .accordion {
  margin-left: 50px;
  margin-top: 50px;
}

div#sample.example section {
  box-sizing: border-box;
  clear: both;
  position: relative;
  display: block;
  width: 300px;
  height: 32px;
  padding: 0;
  background-color: #fff;
  box-shadow: inset 0 0 1px 1px #000;
  overflow: hidden;
}

div#sample.example section:target {
  height: auto;
}

div#sample.example a {
  box-sizing: border-box;
  display: block;
  float: right;
  width: 50%;
  height: 32px;
  margin: 0;
  padding: 4px;
  text-align: center;
  font-size: 16px;
  color: #000;
  background-color: #fff;
  box-shadow: inset 0 0 1px 1px #000;
}

div#sample.example p {
  box-sizing: border-box;
  clear: both;
  display: block;
  width: 100%;
  padding: 16px;
  margin: 16px 0 0;
  text-align: center;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample" class="example">
  <article class="accordion">
    <section id="ac1">
      <a href="#ac0" class="ac-close">Close</a>
      <a href="#ac1" class="ac-open">Open</a>
      <div class="ac-content">
        <p>The elephants talking in their sleep kept me up so late.</p>
      </div>
    </section>
  </article>
</div>

Senaryo

$(document).ready(function() {

      // anchor links without history
      $.acAnch = function(event) {
        event.preventDefault();
        var anchLnk = $(event.target);
        var anchTrgt = anchLnk.attr('href');
        window.location.replace(anchTrgt);
      }
      // listen for anchor clicks
      $('.accordion').on('click', 'a', $.acAnch);

    });

Bu çok basit:
1. acAnch işlevi hrefözniteliği alır ve içine bırakır window.location.replace().
2. acAnch işlevini çalıştırmak için akordeon içindeki çapa tıklamalarını dinleyin.

Böylece tüm komut dosyası çalıştırılır window.location.replace('/this_same_page.html#on_page_anchor')

Konsola koyarsanız çalışır, CSP ihlali yoktur. Ancak harici komut dosyasından çalıştırmak işe yaramaz.

Bağlantılardaki satır içi iyi çalışır:

onclick="event.preventDefault();window.location.replace('/thispage.html#acc0');"
onclick="event.preventDefault();window.location.replace('/thispage.html#acc1');"

İlgili bağlantılara koymak mükemmel çalışıyor , ama gerçekten böyle satır içi komut dosyası kullanmamayı tercih ediyorum. Bunu harici bir komut dosyasıyla yapmanın bir yolu olmalı .

Javascript iframe yerine üst üzerinde çalışmayı denedim (tabii ki çocuk içindeki bağlantıları seçmek için değişiklikler ile). Aynı CSP hatası sonucu.

Bunu neden yapıyorum?

Site örnekten çok daha karmaşık. İç çerçevelerdeki çapalar iyi çalışır, ancak tarih ekler. Yukarıdaki kodu javascript olmadan çalıştırırsanız (veya yalnızca snippet'i çalıştırırsanız), akordeonu birkaç kez açıp kapatır ve geri düğmesini kullanırsanız, açık kapalı durumlara geri döner.

Geçmişi umursamıyorum, ancak bir iframe'deyse, üst sayfadan ayrılıp geri döndüğünüzde, iframe'deki geçmiş bozulur. Geri gitmek artık akordeon durumlarında geri gitmiyor, bunun yerine iframe'i yeniden yüklemeye devam ediyor. Başlangıçta çapalar iframe'in yeniden yüklenmesine neden olmaz, ancak sayfadan ayrılana ve geri dönene kadar iyi çalışan akordeon durumu geçmişinden geçer . Sonra geri artık akordeon durumlarından geçmez, ancak sadece aynı iframe yeniden yüklemelerinden oluşan bir yığından geçer. Çok kullanıcıca düşmanca bir davranış.

Çalışacak başka bir yöntem varsa location.replace kullanmanıza gerek yok. Yine de birçok yaklaşımı denedim ve aynı sonucu elde edebilecek yöntemlerin genellikle aynı hatayla sonuçlandığını gördüm.

Amaç, bir bağlantı çerçevesi içinde sayfadaki bağlantı bağlantılarını yeniden yüklemeden ve geçmiş olmadan etkinleştirmektir .

Satır içi komut dosyası çalışır. Harici bir .js dosyasında çalışmasını sağlayabilir miyiz?

evet referans için -window-location-replace ile iframe kullanabilirsiniz, bu ref link Javascript location.replace ve iframe kullanabilirsiniz

html iframe etiketi yerine CSS kullanabilirsiniz çünkü iframe etiketi html biçiminde kaldırılır