技术问答HTML鎬庝箞瀹炵幇绫讳技include鍔熻兘 - 扬州沐宇科技

鍦℉TML涓紝娌℃湁鐩存帴瀹炵幇绫讳技浜巌nclude鍔熻兘鐨勫唴缃満鍒躲€傜劧鑰岋紝鍙互閫氳繃浣跨敤涓€浜涘叾浠栨妧鏈潵妯℃嫙绫讳技鐨勬晥鏋溿€?/span>

涓嬮潰鏄袱绉嶅父鐢ㄧ殑鏂规硶锛?/span>

1. 浣跨敤鏈嶅姟鍣?/span>绔ā鏉垮紩鎿庯細

鏈嶅姟鍣ㄧ妯℃澘寮曟搸锛堝PHP銆丳ython鐨凧inja2銆丯ode.js鐨凟JS绛夛級鍙互鍦ㄦ湇鍔″櫒绔皢澶氫釜鏂囦欢鍚堝苟涓轰竴涓緭鍑虹殑HTML鏂囦欢銆?/span>杩欐牱锛屼綘鍙互鍒涘缓涓€涓寘鍚叡浜粍浠舵垨鐗囨鐨勬ā鏉匡紝骞跺湪鏈嶅姟鍣ㄧ杩涜娓叉煋銆傜劧鍚庯紝閫氳繃鏈嶅姟鍣ㄤ紶杈撶敓鎴愮殑HTML鍒板鎴风銆?/span>杩欑鏂瑰紡闇€瑕佷綘鏈夋湇鍔″櫒绔紪绋嬬殑缁忛獙銆?/span>

2. 浣跨敤JavaScript鍜孉JAX锛?/span>

浣跨敤JavaScript鍜孉JAX锛圓synchronous JavaScript and XML锛夛紝浣犲彲浠ラ€氳繃寮傛鍔犺浇鍏朵粬HTML鏂囦欢鐨勫唴瀹瑰苟鎻掑叆鍒板綋鍓?/span>椤甸潰涓€傝繖绉嶆柟娉曢渶瑕佸JavaScript鍜孉JAX鏈変竴瀹氱殑浜嗚В銆?/span>

浠ヤ笅鏄竴涓娇鐢╦Query搴撳疄鐜扮殑绠€鍗曠ず渚嬶紝鐢ㄤ簬閫氳繃AJAX鍔犺浇澶栭儴HTML鏂囦欢鍐呭骞舵彃鍏ュ埌褰撳墠椤甸潰涓細

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="includedContent"></div>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "external.html",
        dataType: "html",
        success: function(data) {
          $("#includedContent").html(data);
        }
      });
    });
  </script>
</body>
</html>

鍦ㄤ笂闈㈢殑绀轰緥涓紝external.html鏄鍖呭惈鐨勫閮℉TML鏂囦欢銆傞€氳繃AJAX璇锋眰灏嗚鏂囦欢鐨勫唴瀹瑰姞杞藉埌#includedContent鍏?/span>绱犱腑銆?/span>