jqueryのloadメソッドを使用して動的読み込みを設計し、読み込まれたページでのJavaScriptエラーの問題を解決します。-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-06-30 14:26:58

オリジナル

1920 人が閲覧しました

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);
  });

ログイン後にコピー

1. 問題

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

JavaScript

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

2. 解決策

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

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

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <!-- Tell the browser to be responsive to screen width -->
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <!-- Bootstrap 3.3.6 -->
        <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css">       
    </head>

    <body class="hold-transition skin-blue-light sidebar-mini" onload="onload();">
        <p class="wrapper">
            
            <p id="header">
            
            </p>
            
            <!-- Left side column. contains the logo and sidebar -->
            <p id="sidebar">
            
            </p>

            <!-- Content Wrapper. Contains page content -->
            <p id="content" class="content-wrapper clearfix">
                <!-- Content Header (Page header) -->
                
                
            </p>
            <!-- /.content-wrapper -->

            <p id="footer">
            
            </p>
            
            <!-- Add the sidebar&#39;s background. This p must be placed
       immediately after the control sidebar -->
            <p class="control-sidebar-bg"></p>

        </p>
        <!-- ./wrapper -->

        <!-- jQuery 2.2.3 -->
        <script src="../resources/plugins/jQuery/jquery-2.2.3.min.js"></script>
        <!-- Bootstrap 3.3.6 -->
        <script src="../resources/bootstrap/js/bootstrap.min.js"></script>
        
        <!--左侧菜单-->
        <script src="../resources/dist/js/common/global.js"></script>
        <script src="../resources/dist/js/menu/menuTemplate.js"></script>
        <script src="../resources/dist/js/menu/menu.js"></script>
    </body>
<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">测试</span>
 *注意：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('#content');
     });

 }</script>
</html>

ログイン後にコピー

ロードされたページ:

<p id="content">
    <p>测试二</p>
    <span onclick="javascript:load(this);" href="/backstage/website/test.html">测试</span>
    <a href="javascript:test();">测试</a>
    <script>        function test(){
            alert("测试二页面");
        }    </script>
    <script>        function test2(){
            alert("ceshi");
        }    </script>
</p>

ログイン後にコピー

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

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