iframeをチカチカしないように表示させたい。

iframeの中をPHPで常時更新したいのですが、画面がチカチカします。
ちなみにiframeを使わずに一つのPHPで実現しようとすると文字表示はチカチカしないのですが、banner.jpgがチカチカします。
どうすればチカチカしないでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<body>
4	<p align="center">
5	<img src="banner.jpg" width="100">
6	</p>
7	<br>
8	<div id="container">
9		<iframe width = "100%" height = "100%" src="test.php"></iframe>
10	</div>
11</body>
12</html>
13
14<style>
15	html, body {
16		height:100%;
17	}
18	#container {
19		height: 80%;
20		padding: 1em;
21	}
22	iframe {
23		width: 100%;
24		height: 100%;
25		border:1px solid #CCC;
26	}
27</style>

PHP
1<!DOCTYPE html>
2<html lang="ja">
3<body>
4	<div class="text-box">
5	<h1 class="text">
6		test
7	</h1>
8	</div>
9<script>
10	 setTimeout(function() {
11	    location.reload();
12	},10);
13</script>
14<style>
15	.text-box {
16	  position: absolute;
17	  top: 0%;
18	  left: 0%;
19	  width: 100%;
20	  -webkit-transform: translate(0%, 0%);
21	  -moz-transform: translate(0%, 0%);
22	  transform: translate(0%, 0%);
23	  z-index: 100;
24	  background-color: #000;
25	}
26	.text {
27	  font-family: Roboto;
28	  font-size: 150px;
29	  font-weight: bold;
30	  line-height: 1.2;
31	  padding: 0 50px;
32	  text-align: center;
33	  color: #fff;
34	}
35</style>
36</body>
37</html>

補足
画面に表示する文字列は0.01秒ごとに更新します。

HTML
1	<h1 class="text">
2		test
3	</h1>

実際はこの「test」が0.01秒ごとに変わります。

出来ました！！！

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<div id="edit_area"></div>
3<script>
4var fn = function() {
5	$.ajax({
6	        type: 'post',
7	        url: "test6.php",
8	        success: function(result){
9			document.getElementById('edit_area').innerHTML = result;
10	        }
11	        });
12	setTimeout(fn,10);
13};
14fn();
15</script>

PHP
1<?php
2$result = file_get_contents ("10.txt");
3file_put_contents("10.txt", $result + 1);
4echo $result;
5exit;
6?>

m.ts10806

2022/04/05 23:46

location.reload();の必要性が不明

yambejp

2022/04/06 00:33

更新がないのにリロードする意図は？

行動規範の内容に同意します

回答2件

ベストアンサー

0.01秒毎にリロードしてますから、そりゃあ描画がちらつくでしょう。
AJAXで更新に必要なデータだけ取得して更新された部分だけDOMを変更すような構成が必要です。あと0.01秒毎にサーバに接続するのは頻度が高すぎると思います。

投稿2022/04/05 23:14

int32_t

総合スコア20872

これ、しっかり理解しなければドツボにはまりますよ？
reloadはiframeに対してですよね
あなたの環境下では画像のみがチカチカしてるように見えるようですが（画像だけが問題であると錯覚します）
が、F5ロードされてるのと同じです
intさんがいうように必要な部分だけを取得/更新すればいいんです(追記じゃなくて書換ですよね？)(厳密にいえば必要な部分だけを書き換えても繰り返せばチカチカする見え方にはなりますが気にはならないでしょう)

投稿2022/04/06 05:15

編集2022/04/06 05:23