Q&A
ローカルサーバを立ててますか？ それとも、HTMLファイルをダブルクリックするなどして動作させてますか？
前提・実現したいこと
iframeの閲覧履歴を操作したい。
例1：戻るボタンを押したら、1個前の閲覧履歴に。進むボタンを押したら、1個後ろの閲覧履歴に移動する。
例2：iframe内の履歴が一番最初の時は、戻るボタンが。iframe内の履歴が一番最後の時は、進むボタンがdisabled化
発生している問題・エラーメッセージ
戻る・進むボタンを押しても、iframe内のページは変化がありません
エラーメッセージ ***.html:10 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. ***.html:13 Uncaught TypeError: Cannot read property 'contentWindow' of null
該当のソースコード
javascript
1 function backHistory() {//alert(0); 2 document.getElementById("aaa").contentWindow.history.back(); 3 } 4 5 function forwardHistory() {//alert(0); 6 document.getElementById("aaa").contentWindow.history.forward(); 7 } 8 9 function checkHistory() { 10 window.document.getElementById("leng").value = document.getElementById("aaa").contentWindow.history.length; 11 }
html
1index.html 2<body> 3 <input type="button" value="履歴チェック" onclick="checkHistory();"> 4 履歴総数: 5 <input type="text" id="leng" size="4"> 6 7 <hr /> 8 <button id="back" name="direct" 9 onclick="backHistory()">＜--戻る</button> 10 <button id="forward" name="direct" onclick="forwardHistory()">進む--＞</button> 11 <hr /> 12 <iframe src="./sample.html" id="aaa" name="aaa" width="800" height="300"></iframe> 13 <hr /> 14 <hr /> 15 <iframe src="./sample.html" id="bbb" name="aaa" width="800" height="300"></iframe> 16 <hr /> 17</body> 18 19sample.html 20<body> 21 <a href="./test1.html">test1</a> 22 <a href="./test2.html">test2</a> 23 <a href="./test3.html">test3</a> 24</body> 25 26test1.html 27<body> 28 test1 29 <a href="./test2.html">test2</a> 30 <a href="./test3.html">test3</a> 31</body> 32 33test2.html 34<body> 35 <a href="./test1.html">test1</a> 36 test2 37 <a href="./test3.html">test3</a> 38</body> 39 40test3.html 41<body> 42 <a href="./test1.html">test1</a> 43 <a href="./test2.html">test2</a> 44 test3 45</body>
試したこと
JavaScript
document.getElementById("aaa").contentWindowを削除して、history.back();とhistory.forward();
にしたら戻るボタンと進むボタンが機能しました。
ですが、idがaaaじゃないものの履歴も拾ってきています。
うまくhistoryの履歴個数が取れないため、historyの履歴個数を利用したdisabled化が出来ません。
どうか、皆様方からご助言を頂けたらと存じます。
お手数ですが、宜しくお願い致します。
###補足 2021/02/16 15:55
xamppを立ち上げて上記のプログラムを試してみました。
戻るボタン、進むボタンは一応機能します。
ですが、必要以上に戻るボタンをクリックすると、iframeがあるページの前のページに戻ります。
また、戻るボタンや進むボタンのdisabled化が分かりません。
###補足 2021/02/17 16:29
sample.htmlのソースを追加しました。
Lhankor_Mhy様
コメント頂きありがとうございます。
上記エラーは、サーバーが経ててないため起ったエラーでした。
Xamppで走らせましたら、上記エラーが消えました。
ですが、必要以上に戻るボタンをクリックすると、iframeがあるページの前のページに戻ります。
また、戻るボタンや進むボタンのdisabled化が分かりません。
最初に読み込まれたときに、contentWindow.historyの最小値をとった方がよろしいのでしょうか。
何度も質問してしまい、申し訳ございません。
sample.html の中身も test1.html と同じ感じですか？
Lhankor_Mhy様。
返信が遅くなってしまい、申し訳ございません。
htmlのソースにsample.htmlのソースを追加しました。
test1.htmlとほとんど一緒です。
ご提示のコードを試してみましたが、「必要以上に戻るボタンをクリックすると、iframeがあるページの前のページに戻ります」という問題が再現していないように見えました。
「iframeがあるページの前のページ」とは、index.htmlの前の（ここには提示されていない）ページ、という意味ですか？
まだ何か提示していない前提があるのであれば、ご提示ください。
Lhankor_Mhy様
コメント頂きありがとうございます。
>「iframeがあるページの前のページ」とは、index.htmlの前の（ここには提示されていない）ページ、という意味ですか？
はい。その通りでございます。
index.htmlの前のページに遷移してしまいます。
index.htmlの前の（ここには提示されていない）ページは、index.htmlとだいたい同じ感じですか？
Lhankor_Mhy様
コメント頂きありがとうございます。
ここには提示されていないページは、index.htmlとは違い、メニュー画面となっております。
とりあえず、なんでもいい感じですかね？？
Lhankor_Mhy様
はい。ここには提示されていないページは、何でもよいです。
回答2件
0
ベストアンサー
***.html:10 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
ローカルファイル同士は別オリジンとみなされるため、<iframe>の外側から中のDOMへアクセスできません。
投稿2021/02/16 06:06
総合スコア145977
maisumakun様
コメント頂きありがとうございます。
ローカルファイル同士は別オリジンとみなされるんですね。ご教授いただきありがとうございます。
早速、xamppを立ち上げて上記のプログラムを試してみました。
戻るボタン、進むボタンは一応機能します。
ですが、必要以上に戻るボタンをクリックすると、iframeがあるページの前のページに戻ります。
また、戻るボタンや進むボタンのdisabled化が分かりません。
最初に読み込まれたときに、contentWindow.historyの最小値をとった方がよろしいのでしょうか。
何度も質問してしまい、申し訳ございません。
0
historyに依存する実装はあまりよろしくないかと。
現在のページをもとに前後を決めるような実装にしてみてください。そうしたら意図しない遷移を避けられるでしょうし、そもそもiframeでなきゃいけないかどうかも考えたほうがいいかもしれません。
XAMPP入れられてるならPHPも使えるわけですし。
投稿2021/02/16 06:30
総合スコア80875
m.ts10806様
コメント頂きありがとうございます。
phpには、include関数もあります。
ですが、、下記phpファイルをiframe関数からinclude関数で書くと、
postがかかって、iframeのように履歴の保存が出来ません。
iframe内でphpファイルを動かしたいのですが、良い方法はございませんでしょうか。
何度も質問になってしまい、申し訳ございません。
```php
<!DOCTYPE html>
<?php
if ($_POST['back']) {
echo 'back_button_is_clicked<br>';
}
if ($_POST['name']) {
echo 'name_button_is_clicked_hahahhahahahahaha<br>';
}
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>php_button_test</title>
</head>
<body>
<form method="post" id="form1">
</form>
<input type="submit" name="back" value="戻る" form="form1">
<input type="submit" name="name" value="名前" form="form1">
<iframe name="send" style="width:0px;height:0px;border:0px;"></iframe>
</body>
</html>
```
あなたの回答
tips
プレビュー
