iframeページの読み込みが途中で止まる

前提・実現したいこと

ネットショップのページ作りで、コンテンツページを作成しています。
iframeでコンテンツを表示させているのですが、iphoneで動作確認をするとまれに途中までの読み込みで止まってしまい
フッターに埋もれてしまうので直したいです。
リロードするときちんとしたページが表示されるので、原因が分かればと思っています。

発生している問題・エラーメッセージ

mb_box2に該当する部分がスマホで見るとコンテンツの読み込みが途中で表示される

該当のソースコード

<script type="text/javascript" src="./js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.iframe-auto-height.js"></script>   
    
</head>


  <style type="text/css">

/*===============================================
画面の横幅が769px以上（パソコン用）
===============================================*/
@media screen and (min-width: 769px){
html,body{
	font-family:"Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic", sans-serif
}

body{
	width: 100%;
	margin: 0 auto;
}
a {
 
color:#000;
text-decoration:none;
 
}

      
.pc_box1 {
  width: 100%;
}      
.pc_box2 {
  float: left;
  width: 30%;
}
 .pc_box3 {
  float: right;
  width: 70%;
}
.pc_box4 {
  width: 100%;
} 
    
.mb_box1 {
  display: none;
}      
.mb_box2 {
  display: none;
}
 .mb_box3 {
  display: none;
}
    
      
}  
     
 
/*===============================================
画面の横幅が640pxまで（スマホ用）
===============================================*/
@media screen and (max-width:640px){

html,body{
	font-family:"Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic", sans-serif
}

body{
	width: 100%;
	margin: 0 auto;
}
    
.pc_box1 {
  display: none;
}      
.pc_box2 {
  display: none;
}
 .pc_box3 {
  display: none;
}
.pc_box4 {
  display: none;
} 
    
.mb_box1 {
  width: 100%;
}      
.mb_box2 {
  width: 100%;
}
iframe#parentframe { 
  width: 100%;
}  
}      

      

</style>
   
<body>    
<center> 
  
    
  <div class="pc_box1"><iframe src="./header.html" width="100%" height="420" frameborder="0" scrolling="no" name="header" marginwidth="0" marginheight="0" hspace="0" vspace="0" style="position: relative; left: 0px; z-index: 1;"> </iframe>
</div>
  
  <div class="pc_box2"><iframe src="./side.html" width="310" height="10500" frameborder="0" scrolling="no" name="sidebar" marginwidth="0" marginheight="0" hspace="0" vspace="0" style="position: relative; left: 0px; z-index: 1;"></iframe></div>
   
</center>    
      
    
  <div class="pc_box3"><iframe src="URL" width="760" height="6500" frameborder="0" scrolling="no" name="sidebar" marginwidth="0" marginheight="0" hspace="0" vspace="0" style="position: relative; left: 0px; z-index: 1;"></iframe></div>

<center>    
  <div class="pc_box4"><iframe src="./footer_02.html" width="100%" height="1500" frameborder="0" scrolling="no" name="footer" marginwidth="0" marginheight="0" hspace="0" vspace="0" style="position: relative; left: 0px; z-index: 1;"></iframe></div>



</center>
  
 
    
    
<link rel="stylesheet" type="text/css" href="./css/mb_header.css" />
    
<div class="head_banner">
    <div class="mb_box1"><iframe src="./mb_header.html" width="100%" height="300" frameborder="0" scrolling="no" name="header" marginwidth="0" marginheight="0" hspace="0" vspace="0" style="position: relative; left: 0px; z-index: 1;"></iframe></div>
</div> 
    
<div class="contents">
<p></p>
<div class="mb_box2"><iframe id="parentframe" frameborder="0" src="URL" width="100%" height="7500" scrolling="no" name="header" marginwidth="0" marginheight="0" hspace="0" vspace="0" style="position: relative; left: 0px; z-index: 1;"></iframe></div>
    
    </div> 
    
<script>jQuery('iframe').iframeAutoHeight();</script>
<script>
// 子画面の要素を取得
var elm = document.getElementById("parentframe");
 
// 子画面のコンテンツサイズに合わせてサイズを変更する関数
function changeParentHeight(){
  elm.style.height = elm.contentWindow.document.body.scrollHeight + "px";
}
 
// 親画面 iframe の高さを変更するイベント
// 1. 子画面の読み込み完了時点で処理を行う
elm.contentWindow.onload = function(){ changeParentHeight(); };
 
// 2. 子画面のウィンドウサイズ変更が完了した時点で処理を行う
var timer = 0;
elm.contentWindow.onresize = function () {
  if (timer > 0) {
    clearTimeout(timer);
  }
  timer = setTimeout(function () {
    changeParentHeight();
  }, 100);
};    
    </script>
    
</body>
</html>

試したこと

レスポンシブ対応にしたいので、コンテンツの更新を簡単にするためにiframe表示は使いたいと思ってます。
高さの自動取得ができるようにscriptを入れたところキレイに表示できるときとできないときが出るようになりました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！