HTMLでページ遷移時に背景を引き継ぎたい

webで色々と探してみたのですが、求めるものにたどり着けなかったので質問です。

webページで背景に色をつけているのですが、
aタグでページを移動する際に一瞬真っ白になります。
おそらくどちらのページも表示されていないが為にそうなっているのだと思うのですが、
この空白を消すことはできないでしょうか？
###コード
pageA.html

html
1<!-- 簡略のため、headは記載していません -->
2<body>
3<a href="pageB.html">Bに移動</a>
4<script>
5  document.body.style.backgroundColor = "#FFFF00";
6</script>
7</body>

pageB.html

html
1<!-- 簡略のため、headは記載していません -->
2<body>
3<a href="pageA.html">Aに移動</a>
4<script>
5  document.body.style.backgroundColor = "#FFFF00";
6</script>
7</body>

###手順・該当箇所

pageA.htmlにアクセス
↓
「<a href="pageB.html">Bに移動</a>」を押す。
↓
pageB.htmlが読み込み始まる。→ここで一瞬真っ白になるのを避けたい。
↓
pageB.htmlが表示される。→ここではscriptが読まれるので色が変化している

###制約
cssファイルでの指定はできない。（javascriptを使用しての指定は可能）
【追記】electronを使用しているので、electron専用で何かあればそれでも構いません。

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

回答1件

ベストアンサー

SPAにして背景はそのままでコンテンツ(文字や画像のみ)を入れ替えるようにしてはどうでしょう？

SPA（シングルページアプリケーション）ってなに？

そもそもですがスタイルで背景を指定じゃダメなのですか？

pageA.html

html
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5body {background-color: #FFFF00}
6</style>
7</head>
8<body>
9<a href="pageB.html">Bに移動</a>
10</body>
11</html>

pageB.html

html
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5body {background-color: #FFFF00}
6</style>
7</head>
8<body>
9<a href="pageA.html">Bに移動</a>
10</body>
11</html>

投稿2020/02/12 13:24

junzi

総合スコア279

yuuyu

2020/02/12 13:48

SPAに関しては少し考えてみます。。スタイル指定ですが、背景色を動的に変更したい場面があり、cssで指定するとその分のcssファイルを作るかjavascriptで切り替えるかになると思い、javascriptで変更することにした次第です。あと一応直接cssでも試したんですけど、一瞬の真っ白の回避策にはなっていなかったので意味ないのかなぁと・・・

miyabi_pudding

2020/02/12 22:08 編集

横槍すみません。 > あと一応直接cssでも試したんですけど、一瞬の真っ白の回避策にはなっていなかったそうとうなことがない限りそんなことはおきえません。 CSSの指定の仕方や、読み込む順番があまりよろしくないのかと。 CSSの試した方法も記載お願いします。質問本文は修正できるので。あと、HTMLの要素数が多かったり、CSSより先に処理が重いJSを実行していると、そう言った現象も起き得るかも。なんにせよ、それはJSでやるべきものではありません。（JSでやる限り、タイムラグは避けれない）

yuuyu

2020/02/13 07:28

cssで試した時は<head>の一番上に、<link rel="stylesheet" href="cssfile.css">を入れ、 cssfile内でbody{background-color: #FFFF00}の記述です。 JSではラグが避けれないのですね。。

miyabi_pudding

2020/02/13 09:27

yuuyuさん > そのことを、質問本文に記載してください。質問本文は修正できます。

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