in-test3
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チェック�{ックスの反映</title>
<style>
/* レイアウトのスタイル */
#container {
display: flex;
justify-content: space-between;
padding: 20px;
}
#checkbox-container {
width: 30%;
}
#iframe-container {
width: 60%;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<!-- チェック�{ックスを表示する部分 -->
<div id="checkbox-container">
<h3>チェック�{ックス</h3>
<label>
<input type="checkbox" id="checkbox" onclick="updateIframe()"> チェックを入れる
</label>
</div>
<!-- インラインフレームを表示する部分 -->
<div id="iframe-container">
<iframe id="iframe" srcdoc="<html><body><h2>ここに反映されます</h2></body></html>" width="100%" height="200px"></iframe>
</div>
</div>
<script>
function updateIframe() {
var iframe = document.getElementById("iframe");
var checkbox = document.getElementById("checkbox");
var message = checkbox.checked ? "チェック�{ックスが選択されました！" : "チェック�{ックスが解除されました！";
// iframe内のドキュメントを取得して更新する
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h2>" + message + "</h2>";
}
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チェック�{ックスの反映</title>
<style>
/* レイアウトのスタイル */
#container {
display: flex;
justify-content: space-between;
padding: 20px;
}
#checkbox-container {
width: 30%;
}
#iframe-container {
width: 60%;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<!-- チェック�{ックスを表示する部分 -->
<div id="checkbox-container">
<h3>チェック�{ックス</h3>
<label>
<input type="checkbox" id="checkbox" onclick="updateIframe()"> チェックを入れる
</label>
</div>
<!-- インラインフレームを表示する部分 -->
<div id="iframe-container">
<iframe id="iframe" srcdoc="<html><body><h2>ここに反映されます</h2></body></html>" width="100%" height="200px"></iframe>
</div>
</div>
<script>
function updateIframe() {
var iframe = document.getElementById("iframe");
var checkbox = document.getElementById("checkbox");
var message = checkbox.checked ? "チェック�{ックスが選択されました！" : "チェック�{ックスが解除されました！";
// iframe内のドキュメントを取得して更新する
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h2>" + message + "</h2>";
}
</script>
</body>
</html>
使用変数
| charset | |
| checkbox | |
| content | |
| height | |
| id | |
| iframe | |
| iframeDocument | |
| innerHTML | |
| lang | |
| message | |
| name | |
| onclick | |
| scale | |
| srcdoc | |
| type | |
| updateIframe -------( Function ) | |
| width |