わかりました - まず第一に、これが理想的ではないことを知っています - しかし、私たちは問題を継承しており、いくつかは SSI html をよく考えていませんでした。
いくつかの背景: グローバル トップ ナビゲーションとフッターのクライアントからの SSI コードを含める必要があるレスポンシブ サイトを実装しました。ただし、サイトのサイズが変更されたり、モバイル デバイスにロードされたりするため、SSI を DESKTOP から MOBILE に変更する必要があります。現時点では、このすべてをクライアント側で行っています。ブレークポイントにトリガーがあり、DOM を変更してすべてのレスポンシブ処理を実行します。
同様の例がhttp://www.conrandesigngroup.comにあります。(ブラウザーのサイズを変更して、何が起こるかを確認してください。)
通常、SSI を保持ページにロードし、AJAX を何らかのセレクターを使用して適切な場所にロードします。
問題: SSI は完全に形成された HTML ではなく、次のようになります。
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
次に、モバイル サイト用の SSI は次のとおりです。
<!-- mobile ssi -->
<script>some script...</script>
</head>
<body>
Whole bunch of mobile html...
<div class="content">
</head>したがって、クロージングとオープニング<body>があり、最後にオープニングがあることに気付くでしょう<div>。したがって、これを選択して DOM を使用して置き換える方法はありません。コードの両側にコメントを使用し、javascript 正規表現を使用してコードを置き換えることを考えていました。これが実際にブラウザを更新するかどうかはわかりません。
したがって、デスクトップ モードでは、ページ全体は次のようになります。
<html>
<title>my page</title>
<head>
...all the head stuff
<!-- START of ssi -->
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
<!-- END of SSI -->
...all the page HTML
</div>
</body>
</html>
これで問題ありません。HTML はすべてサーバー側でまとめられ、タグを正しく開いたり閉じたりできます。問題は、クライアント側のコードを使用して、コメント内の HTML をどのように変更するかです。<!- START of ssi -->...<!-- END of SSI -->
結局のところ、それは実際には SSI の問題ではなく、要素にうまくまとめられていない HTML を少し変更する方法です。
以前にこの問題に遭遇した人はいますか、何か提案はありますか?