jqueryのloadメソッドを使用して動的読み込みを設計し、読み込まれたページでのJavaScriptエラーの問題を解決します。

1. 問題分析

図に示すように、バックエンド システムについては、誰もがレイアウト構造を知っており、ヘッダー、サイドバー、フッターを分離する必要があります。中間部分のコンテンツは動的に変更する必要があります。つまり、異なるメニューに従って異なるページが配置されますが、全体的なレイアウトは変わりません

このレイアウト構造には、純粋な HTML のコンテンツのさまざまな部分を埋め込む機能はありません。この種の問題を見つけたり解決するには、jquery の優れた互換性と幅広い用途により、ここでは

jquery のロード メソッドを使用して、この

ページ レイアウト

フレームワークを処理します。

2.loadメソッドの詳しい説明

1.定义
　　$().load(,,);

必須のURLパラメータには読み込みたいURLを指定します。

オプションの

dataパラメータは、リクエストとともに送信されるクエリ文字列のキーと値のペアのセットを指定します。

オプションの

callbackパラメータは、load()メソッドの完了後に実行される関数の名前です。

2. 例

URLパラメータにjQueryセレクターを追加することもできます。

• 次の例では、「demo_test.txt」ファイル内の id="p1" の要素の内容を、指定された

  要素にロードします。

      $("#p1").load("demo_test.txt #p1");

オプションのコールバック パラメーターは、load( )

コールバック関数

はメソッドの完了後に許可されます。コールバック関数は別の関数に設定できます

• $("#p1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){    if(statusTxt=="success")
        alert("外部内容加载成功！");    if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });

3. レイアウト フレームワークのロードの使用

1. 問題

インターネット上の多くの人は、load メソッドを使用して動的ページをロードするときに、共通の問題に遭遇します。これは、ロードされたページ内の

JavaScript

コードが無効です。 これは、load によってロードされた外部ファイルが Script 部分を削除するため、ロードされたページでページの JavaScript が呼び出されるとき、xxxfunction が未定義になります。 。

2. 解決策

静的 HTML コードのみを含むヘッダー、サイドバー、フッターの場合は、load を使用して直接読み込みます

• 中間コンテンツの変更に対応するコンテンツには、通常、対応する JavaScript コードが含まれます。 load メソッド (以下のコード) は、jquery.load() メソッドを使用して対応するコンテンツをロードしながら、load コールバック メソッドを使用して JavaScript のロードを処理し、ロードされたページの JavaScript コードを
  では、load()が実行されるたびにcontentの内容が上書きされるため、繰り返し読み込まれる心配はありません。これにより、ロードされたページ上の無効な js の問題が完全に解決されます。具体的なコードは次のとおりです:

• IV. コード例
  レイアウト ページ:

nbsp;html>


    
        <meta>
        <meta>
        <title></title>
        <!-- Tell the browser to be responsive to screen width -->
        <meta>
        <!-- Bootstrap 3.3.6 -->
        <link>       
    

    
        <p>
            
            </p><p>
            
            </p>
            
            <!-- Left side column. contains the logo and sidebar -->
            <p>
            
            </p>

            <!-- Content Wrapper. Contains page content -->
            <p>
                <!-- Content Header (Page header) -->
                
                
            </p>
            <!-- /.content-wrapper -->

            <p>
            
            </p>
            
            <!-- Add the sidebar&#39;s background. This p must be placed
       immediately after the control sidebar -->
            <p></p>

        
        <!-- ./wrapper -->

        <!-- jQuery 2.2.3 -->
        <script></script>
        <!-- Bootstrap 3.3.6 -->
        <script></script>
        
        <!--左侧菜单-->
        <script></script>
        <script></script>
        <script></script>
    
<script> //加载页面布局的header,sidebar,footer的内容
 $("#header").load("inc/header.html");
 $("#sidebar").load("inc/sidebar.html");
 $("#footer").load("inc/footer.html"); 
 /*
 *加载变换内容，主要url参数为dom对象，并且该dom中的url放在href中，
 *调用方式如：<span onclick="javascript:load(this);" href="/backstage/website/test.html">测试
 *注意：1.该dom对象最好不要用a标签，因为点击a标签会进入href指定的页面
 *      2.要加载的内容要用 id="content" 标注，因为load中指明了加载页面中指定的id为content下的内容
 *    3.对应页面的JavaScript写在content下 */
 function load(url, data){     //alert($(url).attr("href"));
     $.ajaxSetup({cache: false });
     $("#content").load($(url).attr("href")+ " #content ", data, function(result){         //alert(result);
         //将被加载页的JavaScript加载到本页执行
         $result = $(result); 
         $result.find("script").appendTo(&#39;#content&#39;);
     });

 }</script>

ロードされたページ:

<p>
    </p><p>测试二</p>
    <span>测试</span>
    <a>测试</a>
    <script>        function test(){
            alert("测试二页面");
        }    </script>
    <script>        function test2(){
            alert("ceshi");
        }    </script>

効果のスクリーンショット:

以上がjqueryのloadメソッドを使用して動的読み込みを設計し、読み込まれたページでのJavaScriptエラーの問題を解決します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。