clickイベントをブラウザの履歴に残したくない

Question

発生している問題

preventDefault()を使えばできると思い、試したけど押した回数だけ履歴が残ってしまう。

該当のソースコード

$(document).on('click', '.item1', function (e) {
  $(".item1").click(function (e) {
    e.preventDefault();
    $('#iframe').iziModal('open');
    $('#modal').iziModal('open', {
      iframeURL: $(this).data('href')
    });
  });
  $("#modal").iziModal({
    iframe: true,
    width: '98%',
    iframeHeight: 650,
    zindex: '110',
    iframeURL: "data.html",
    group: 'works',
    overlayColor: 'rgba(0,0,0,0.1)'
  });
  $(".item1").off('click');
});

クリックしてモーダルウインドウを出す、という実装をしています。

試したこと

return false;をすればいいのかなと思ったけど、だめでした

$(document).on('click', '.item1', function (e) {
  e.preventDefault();
  $(".item1").click(function (e) {
    $('#iframe').iziModal('open');
    $('#modal').iziModal('open', {
      iframeURL: $(this).data('href')
    });
  });
  $("#modal").iziModal({
    iframe: true,
    width: '98%',
    iframeHeight: 650,
    zindex: '110',
    iframeURL: "data.html",
    group: 'works',
    overlayColor: 'rgba(0,0,0,0.1)'
  });
  $(".item1").off('click');
  return false;
});

Comments

[kei344]

「履歴」とは何の履歴でしょうか？

[yu_6]

chromeみたいなブラウザの履歴です。ページ履歴とか言うんでしょうか…？

[kei344]

「モーダルで開いたiframe中のページが履歴に残る」のが問題なのでしょうか。

[yu_6]

はいそうです。履歴に一度も残さずiframeを開きたく思っています

Answer 1

履歴とは chrome://history/ の事なのでしょうか。

http://izimodal.marcelodolce.com/ の [iframe] で検証した限りでは、https://player.vimeo.com/video/22439234?autoplay=1 の履歴は chrome://history/ に残りませんでしたが…(Google Chrome 72.0.3626.121)。

DOM的にはiframe要素を読み込んでいるようなので、何某かの機構でiframeリンク先が履歴に残る仕様であれば。jQuery.ajax でコンテンツを取得すれば回避できる可能性はあります。

• jQuery.ajax() | jQuery API Documentation

Re: yu_6 さん

Comments

[yu_6]

ご回答ありがとうございます。
chrome history... ( https://i.imgur.com/0czKuF8.png )この画面のものでしょうか。
( https://i.imgur.com/0tquq6q.png )chromeでは左上の矢印の、この画面のことです。iFrameをクリックした分だけ←で戻らないとiFrame以前には戻れないやつです。この履歴の言い方がわからなくてごめんなさい…

ajaxですか。また少し勉強して試してみようと思います。

[think49]

「左上の矢印」は分かりませんが、私がいうそれは、アドレスバーに chrome://history/ を入力して、[Enter] 押下で開けます。

> iFrameをクリックした分だけ←で戻らないとiFrame以前には戻れないやつです
これも分かりませんが、私がいうのは iframe をクリックしてモーダルウインドウを開いても、リンク先の https://player.vimeo.com/video/22439234?autoplay=1 は履歴に登録されないという事です。
現象は具体的に書きましょう。

[yu_6]

だと先程貼り付けたURLの画像と同じ画面ですね。

( https://i.imgur.com/jyL8LHE.png )こういうことです
chromeを普段使ってなかったらあまりピンとこないかもです

[think49]

状況は理解しましたが、ページ遷移が発生している以上は、[戻る] ボタンの履歴に残るのは自然な動作です。
ページ遷移しないようにするには、iframe要素内でリンクを使わず、ボタン押下でJavaScriptで動的にコンテンツを取得→描画させる必要があります(ここまでいくと、iframe要素を使わなくてもいいかもしれません)。

[yu_6]

遅くなりすみません。

なるほど。
ちなみに、このサイト( https://oscarotero.com/jquery/ )
だとモーダルを開いて閉じても戻るボタンの履歴には残らないのですが、そしてまんまこのようなことがしたいのですが、これはajaxを使っているのでしょうか？

edit: ソースを見た所、0.jsの一番最後らへんにmodalの記述を発見したのですが、iframeという文字が見当たりました。このモーダルプラグインの記述範囲は 13546行目(/* 4 */)~最後まで です。
think49さんのおっしゃる技を使っているのでしょうか？それとも他の技？

Answer 2

はいそうです。履歴に一度も残さずiframeを開きたく思っています

下記方法で出来るようですが（未検証）、ドメインが違う場合はCROSSに引っかかって失敗するかも。また、iziModalがその呼び出し方に対応していない可能性が高いので、やり方を考える必要はあると思います。

【iframeのsrc変更時に履歴を残さない | Project T】
https://www.takurokamiyoshi.net/blog/57/

Comments

[yu_6]

入れてみたのですが履歴は変わりませんでした…
もしかして $('iframe').contentWindow.location.replace('http://XXX'); 以外にも何か入れないと行けなかったんでしょうか

[kei344]

どこにどう入れて、何を試したかも書いていませんし、こちらとしては何もわかりません。

[yu_6]

$(document).on('click', '.item1', function (event) {
$(".item1").click(function (event) {
event.preventDefault();
$('#iframe').iziModal('open');
$('#modal').iziModal('open', {
iframeURL: $(this).data('href')
});
});
$("#modal").iziModal({
iframe: true,
// fullscreen: true,
width: '98%',
iframeHeight: 650,
zindex: '110',
iframeURL: "data.html",
group: 'works',
overlayColor: 'rgba(0,0,0,0.1)'
});
$(".item1").off('click');
$('#iframe').contentWindow.location.replace('data.html'); //ここに追加
});

です。
エラーで「Uncaught TypeError: Cannot read property 'location' of undefined」と出て実行されませんでした。

[kei344]

iziModalの中でiframeの実体を設置/操作している（と予想できる）ので、そう書いても動かないと思います。
切り替えに介入することになるため、iziModal自体使えないのでは。（少なくともiframeURLでの指定では無理だと思います）

[yu_6]

うーんどうすればいいのでしょうか？
諦めるしかないということですか?

[kei344]

まず、iziModalを使わずiframeでの切り替えを試験して、履歴についての問題が解決できるか確認しましょう。回答でも書いている通りこちらでは検証していません。（特定のブラウザに依存した手法の可能性もあります）

次に、それで問題なく履歴が残らなくなった場合、モーダル表示に適したライブラリを探しましょう。
多くのモーダルライブラリが、モーダルエリアに新しく要素を追加して表示（HTMLをモーダルを開くたびに構築）するため、提示した方法を介入させる手段がありません。HTMLを最初から非表示で用意して（そのなかにiframeを入れる）、それを表示するだけのモーダル実装を探してきて使用しましょう。その表示前に、クリックした要素に合わせて書き換えを行えば、（前提部分が問題ないのであれば）できると思います。

[yu_6]

また大変そうですね…
別の方法を探すか、なければ諦めようと思います。ありがとうございました。

Answer 3

iziModal.jsではなく、magnific Popup.jsを使うことで解決しました。
こんなに素晴らしいプラグインがあったとは…
御二方共ありがとうございました！