html内でJavaScriptでオープンしている参照先html。クリックした時だけ読み込みたい。

締切済

質問者：shoshin01
質問日時：2015/04/21 03:54
回答数：2件

こんにちは。
現在ホームページの各htmlページにJavaScriptで他のhtmlを<object>でを開くようにしています。

具体的には、参照先のhtmlは最初は隠れている状態で、参照元の「開くにはクリック」を押して開くようにして、閉じる時には参照元の「閉じるにはクリック」をして見えないようにしています。その様にして縦50px横100pxの<div>の中に参照先htmlを開きます。display:none;とdisplay:block;を使い分けています。
このnoneとblockによって、参照先が開かれていない時は参照元の「閉じるにはクリック」は表示されていなく、参照先が開いている時は参照元の「開くにはクリック」は表示されなくなっています。

/***********************************/
JavaScriptソース
function a(geID,geIDB1,geIDB2){
document.getElementById(geID).style.display = "block";
document.getElementById(geIDB1).style.display = "none";
document.getElementById(geIDB2).style.display = "block";
}
function b(geID,geIDB1,geIDB2){
document.getElementById(geID).style.display = "none";
document.getElementById(geIDB1).style.display = "block";
document.getElementById(geIDB2).style.display = "none";
}
/***********************************/
htmlのソース
<a href="JavaScript:a('the_id','apple','banana');" id="apple" style="display:block;">「開くにはクリック」</a>
<a href="JavaScript:b('the_id','apple','banana');" id="banana" style="display:none;">「閉じるにはクリック」</a>
<div style="display:none;width:50px;height:100px;" id="the_id">
<object type="text/html" data="sanshou_saki.html"></object>
</div>
/***********************************/

ただこれでは隠れている状態でも、htmlは読み込まれてしまいます。クリックして参照先を見てくれたかその参照先にGoogleアナリティクスを貼りたいのですが、常にページを開く度に参照先も読み込まれるためにアナリティクスコードが張れません。

また、SEO的にdisplay:none;を使用しているのはいかがなものか…と言うのを見ましたので変えたいと思った次第です。

どの様な解決方法がありますでしょうか？欲を言えば、一度開かれた参照先は”閉じる”→”開く”としても2度カウントされないのが良いです。

どなたか、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2015/04/23 12:37

ANo1です。

読込先のCSSやスクリプトも反映させたいのであれば、ajaxよりも要素を生成する方法の方が、ブラウザが処理をしてくれるので簡単でしょう。

＞objectをスクリプトで生成するという方法はどの様なものがありますでしょうか？
　・createElement()などを用いて要素を作成することが可能です。
　・innerHTML()を利用して文字列で流し込んでしまってもできます。
　（後者の方が簡単かもしれません）

以下に、createElementを利用した簡単なサンプルを作成してみましたのでご参考までに。
※ object要素だとブラウザによっては読み込んでくれないものがあるようなのでiframe要素に変えています。
　（innerHTMLで書き込めば読み込んでくれるみたいですが…）
※ 一応、簡単なコメントをつけてあります。

（以下、全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">

//読込先のURLデータ（複数化できるように）
var urls = {
　fuga : "fugafuga.html"
}

//クリック時の処理関数
function hoge(e, id){
　var elm = document.getElementById(id);
//対象要素が存在しなければ何もしない
　if(!elm) return;

　var obj = elm.getElementsByTagName("iframe");

//「表示」処理
　if(e.value == "表示"){

//　　すでに読み込んでいる場合（CSSで表示する）
　　if(obj.length){
　　　obj[0].style.display = "block";
　　　statusSet("非表示→表示");
　　}

//　　最初に読み込む場合（要素を追加する）
　　else {
　　　var o = document.createElement("iframe");
　　　o.src = urls[id];
　　　elm.appendChild(o);
　　　statusSet("要素作成、読込み");
　　}
　　e.value = "隠す";
　}

//「隠す」処理
　else {
　　obj[0].style.display = "none";
　　e.value = "表示";
　　statusSet("表示→非表示");
　}

//動作状況表示用（本来は不要です）
　function statusSet(str){
　　var c, elm = document.getElementById("message");
　　while(c = elm.firstChild) elm.removeChild(c);
　　elm.appendChild(document.createTextNode(str));
　}
}
</script>
</head>

<body>
<div>
<input type="button" onclick="hoge(this, 'fuga')" value="表示">
&emsp;【状態】 <span id="message">初期状態</span>
</div>

<div id="fuga"></div>

</body>
</html>

- 1
- 件

通報する

この回答へのお礼

続けてのお詳しいご回答ありがとうございます。大変嬉しいです。

すみません、JavaScriptの初心者で大変申し訳ないのですが、ボタンではなくて、普通のリンクをクリックしたことによって動作するようにして、なおかつ、JavaScriptを外部ファイルへと出来ないでしょうか？その場合はどうしたらよろしいでしょうか？

C言語のみの知識でやっていて、Googleで検索をして色々やったのですが、thisの使い方がイマイチ分からなかったり、リンクをクリックした場合、うまく関数に引数等を渡せていなくて呼び出せていないみたいです。
また、できうる限り外部ファイルへの関数を書くことを試みたのですがダメでした。

教えて君で大変申し訳ございませんがよろしくお願いいたします。

通報する

お礼日時：2015/05/02 14:48

参考程度に

No.1

回答者： fujillin
回答日時：2015/04/21 10:04

こんにちは。

とりあえずの思いつきですが・・・

＞ただこれでは隠れている状態でも、htmlは読み込まれてしまいます。
最初は空のソースにしておいて、クリックされたら読み込めばよろしいのではないでしょうか。
ただし、クリックしてから読み込むので、閲覧者は表示されるまでの間は必ず待たされることになります。
読み込む方法としては、
　1）ajaxでページを取得する
　　（↑ググれば情報があります。ライブラリもたくさんあります。）
　2）ご提示のようにオブジェクト要素をスクリプトで生成する
などがあろうかと思います。

＞欲を言えば、一度開かれた参照先は”閉じる”→”開く”としても2度カウントされないのが良いです。
非表示の際は「display:none」で、表示する際は「対象要素が存在しなければ（上記の方法等で）読み込む、要素があればdisplay:blockで表示」という考え方にすればよろしいのではないでしょうか？

＞SEO的にdisplay:none;を使用しているのはいかがなものか
スクリプトをOFFにしているユーザーには見ることができなくなるなどもあるので、ロード後にスクリプトで非表示にすればよろしいかと。

- 0
- 件

通報する

この回答へのお礼

fujillinさん、ご回答ありがとうございます。お返事遅れて申し訳ございませんでした。

ajaxでまず適当に試みてみたのですが、どうも参照先htmlがcssやjavaやアクセス解析などファイル全体を読み込んでいるみたいでは無く、表示が少し違います。
ajaxは初めてなので全く分かりません。ソースも参照先は表示されていないので不明なのです。
私には敷居が高いのでしょうか？

objectをスクリプトで生成するという方法はどの様なものがありますでしょうか？

ちょっとこんがらがっています。よろしくお願い致します。

通報する

お礼日時：2015/04/22 23:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！