iframeを自動調節するJavascriptが新しいタブで開いたときだけ反映されない

前提・実現したいこと

初心者です。JSでiframeの高さを自動調整するスクリプトを調べて使ってみました。
普通に開いたりリロードしたりする分には問題ないのですが、新しいタブで開いたときにだけ高さが調整されませんでした。
新しいウィンドウで開いてもスーパーリロードをしても問題なく、apacheの設定でキャッシュは取られないようにしています。
いろいろしらべたのですが見つからなかったので質問させていただきました。よろしくお願いします。

該当のソースコード(home.html)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="Cache-Control" content="no-cache">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="home.css">
        <script>console.log("スタイル適用用");</script>
    </head>
    <body>
        <div class = "wrap">
            <iframe scrolling="no" width="100%" height="150" frameborder="0" class="header" src="/defa/header/header.html"></iframe>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script src="/JS/iframe.js"></script>
            <script src="/JS/fadein.js"></script>
        </div>
    </body>
</html>

該当のソースコード(iframe.js)

$('iframe')
    .on('load', function () {
        try {
            $(this).height(0);
            $(this).height(this.contentWindow.document.documentElement.scrollHeight);
        } catch (e) {
        }
    })
    .trigger('load');

該当のソースコード(home.css)

@charset "utf-8";

@font-face {
  font-family: 'azuki';
src: url('/font/azuki.ttf');
}

@font-face {
  font-family: 'logo_round';
src: url('/font/corp_round_v1.ttf');
}

@font-face {
  font-family: 'logo';
src: url('/font/logotypejp_mp_m_1.1.ttf');
}

@font-face {
  font-family: 'din';
src: url('/font/din1451alt.ttf');
}

@font-face {
  font-family: 'koruri';
src: url('/font/Koruri-Light.ttf');
}

* {
  margin: 0px;
  padding: 0px;
}

body
{
  background: rgb(0, 0, 0);
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar
{
  display: none;
}

.wrap
{
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

.header
{
  display: block;
  margin-top: auto;
  width: 100%;
}

h1
{
  font-family: koruri;
  font-weight: normal;
  font-size: 5em;
  color: white;
}

試したこと

iframe.jsを

$('iframe')
    .on('load', function () {
        alert("hello world!");
        try {
            $(this).height(0);
            $(this).height(this.contentWindow.document.documentElement.scrollHeight);
        } catch (e) {
        }
    })
    .trigger('load');

にしてアラートを出させるようにしました。そしたら反応したのでファイル自体は読み込めているようです。

Microsoft Edgeでも高さ調節がされませんでした。

スマホの新しいタブで開くを使うと高さ調節されました。

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

回答1件

新しいタブで開いても読み込まれない

<a href=“https://www.google.com/” target=“_blank” rel=“noopener>Google</a>

てきなので開くのでしょうか？

読み込まれないなら埋め込むのも一手ではないかと考えます

こんな感じでしょうか

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title></title>
6    <script src="/JS/fadein.js"></script>
7</head>
8<body>
9    <iframe src="/defa/header/header.html" frameborder="0" width="100%" height="150"></iframe>
10    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
11    <script>
12        $('iframe')
13        .on('load', function(){
14            try {
15                $(this).height(this.contentWindow.document.documentElement.scrollHeight);
16            } catch (e) {
17            }
18        })
19        .trigger('load');
20    </script>
21</body>
22</html>

特定の物だけに適応したい時は

html
1<iframe src="/defa/header/header.html" frameborder="0" width="100%" height="150"id="iframeID">

として

js
1<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
2<script>
3$("#iframeID").on("load", function(){
4    try {
5        $(this).height(0);
6        $(this).height(this.contentWindow.document.documentElement.scrollHeight);
7    } catch (e) {
8    }
9});
10$("#iframeID").trigger("load");
11</script>