目的
- HTMLでiframeでfocusするしないで枠の色を変えたいです。
- iframeを選択するCSSの
:focusはうまくいきませんでした。 - FireFoxではうまくいきましたがsafari/chromeではうまくいっていません。
- これは自分のための備忘録です。他のブラウザでうまくいく方法があれば更新していきたいと思います。
環境
- 以下でうまくいきました
- FireFox(81.0 (64 ビット)) / MacOS
- safari/Chromeはうまくいっていません
参考
【JavaScript】ウィンドウのアクティブ・非アクティブのイベント【865日目】
フォーカス: focus/blur
コード
- メインのHTML
- メイン側では要素の枠は消しておきます。
main.html
...
bootstrapを使っています。
...
<iframe id="ifrm" src="https://hogehoge/ifrm_canvas.html" width="650" height="518" scrolling="no" frameborder="0"></iframe>
...
- インフレームの読まれる側のHTML
Infrm_canvas.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CANVAS</title>
</head>
<body>
<canvas width="624" height="500" id="canvas" ></canvas>
<script src="/js/ifrm_canvas.js"></script>
</body>
</html>
- 呼ばれる側のJavaScript
ifrm_canvas.js
const canvas = document.getElementById("canvas");
function focus() {
canvas.style="outline: 2px solid orange";
}
function blur() {
canvas.style="outline: 2px solid gray";
}
window.onload = function () {
document.addEventListener("blur", blur, true);
document.addEventListener("focus", focus, true);
}
説明
-
main.htmlの中のinframeで読まれた側のJavaScriptinfrm_canvas.js)でfocus()とblur()のイベントを検知して枠色を変えています。