- ベストアンサー
HTMLファイルの共有方法｜CMSを利用して他のページにHTMLファイルを読み込む方法
- CMSを利用して生成されたHTMLファイルの特定部分を他のページで共有する方法について説明します。
- SSI、PHP、JavaScript、iframeなどを使ってHTMLファイルを読み込む方法がありますが、この質問ではJavaScriptを使用して特定の部分を読み込む方法に焦点を当てます。
- JavaScriptを使用してHTMLファイルの特定の部分を読み込むことで、サーバーの負荷を軽減しながら共通の部分を表示することができます。詳細な手順は以下の通りです。
- shingorin
- お礼率38% (10/26)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.1,No.2です。さらにIFRAME内のCSS定義も取り込みます。 <script type="text/javascript" charset="utf-8"> <!-- String.prototype.camelize = function( ) { return this.replace( /-([a-z])/g, function( $0, $1 ) { return $1.toUpperCase( ) } ); } String.prototype.deCamelize = function( ) { return this.replace( /[A-Z]/g, function( $0 ) { return "-" + $0.toLowerCase( ) } ); } function load(){ var tempframe=document.getElementById("tempframe"); var content,contents,child_Css,my_Css; try{ content=tempframe.window.document; }catch(e){ content=tempframe.contentDocument; } if(content.styleSheets.length == 0){ child_Css=content.styleSheets[0]; }else{ child_Css=content.styleSheets[content.styleSheets.length-1]; } if(document.styleSheets.length == 0){ my_Css=document.styleSheets[0]; }else{ my_Css=document.styleSheets[document.styleSheets.length-1]; } var child_rules = child_Css.rules?child_Css.rules:child_Css.cssRules; for (i=0;i<child_rules.length;i++){ var selector = child_rules[i].selectorText; selector = selector.toLowerCase(); var rule = ""; for (property in child_rules[i].style) { var attribute = child_rules[i].style[property.camelize()]; if (attribute){ rule += property + ":" + attribute +";"; if(my_Css.addRule){ my_Css.addRule(selector, rule); }else{ my_Css.insertRule(selector + " { " + rule + " }",my_Css.cssRules.length); } } } } contents=content.getElementsByTagName("body"); document.getElementById("hoge").innerHTML=contents[0].innerHTML; tempframe.parentNode.removeChild(tempframe); } // --> </script>
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
No1です。No1の方法はあまりにも酷いので、もう少しましな方法です。 やはり、IFRAMEを使うのが妥当、でもじゃまだから消してしまいます。 <body> <div id="side" style="float:left;"><div> <div id="main" style="float:right;"></div> <iframe id="tempframe" onload="load();" src="サイドメニュウ.html" style="height:0px;width:0px;overflow:hidden;"></iframe> <script type="text/javascript" charset="utf-8"> <!-- function load(){ var tempframe=document.getElementById("tempframe"); var content,contents; try{ // IE content=tempframe.window.document; }catch(e){ //IE以外 content=tempframe.contentDocument; } contents=content.getElementsByTagName("body"); document.getElementById("side").innerHTML=contents[0].innerHTML; tempframe.parentNode.removeChild(tempframe); } // --> </script> </body>
- yyr446
- ベストアンサー率65% (870/1330)
cmsをつかって吐き出されたHTMLファイルがまっとうなhtmlかxthml でファイル名が固定であるとして、 <div id="side"><div> にjavascriptで入れたいなら、↓の手がありますが、何か問題がいっぱいありそう．．． <body onload="load(SidMenu.html)"> <div id="side" style="float:left;"><div> <div id="main" style="float:right;"></div> <script type="text/javascript"> function load(filename){ var xmlHttp =(window.ActiveXObject)?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest(); xmlHttp.open("GET","filename",false); xmlHttp.send(null); var domtext=xmlHttp.responseText; document.getElementById("side").innerHTML=domtext; } </script> </body>
お礼
ありがとうございます。すごく丁寧にコードまで書いてくださってすごく助かりました。 是非参考にさせていただきます。