Objectタグで読み込んだリンクが親ページで開けない件の解決法:【無料素材倶楽部】WEBデザインブログ

無料素材倶楽部 > WEBデザインブログ> WEBデザイナー日記 > Objectタグで読み込んだリンクが親ページで開けない件の解決法

Objectタグで読み込んだリンクが親ページで開けない件の解決法

HTML

OBJECTタグで読み込んだHTMLファイルのリンクが読み込み元（親）ページで開かない件について、記事を書いたら、
検索からJavaScriptでの解決法を探してお越しになった方がいたので、今後、わずかでも参考になればと思い、サンプル2つと一緒にjavascript使用での解決法を別途記載しておくことにしました。

解決法１：IEでどうしてもOBJECTタグをそのまま使用したい場合
解決法２：OBJECTタグに固執しないでもいい場合(IE判別後、javascriptから外部ファイルを読み込み出力）

解決法１：IEでどうしてもOBJECTタグをそのまま使用したい場合

IEでObject Tag を利用して外部ファイルを読み込み、子ページのa タグの target属性に、_parentや、_topを指定しても、親ページで開かないのは、読み込み元をそもそも親（Parent)として認識していないからではなかろうかと。
それでも、OBJECTタグをそのまま使用したい、かつ、子ページリンクのtarget属性に、_blankは嫌！な場合、親ページにきちんと名前をつけてやって、ダミーの小窓を開き、そこから、親窓のURLを飛び先に遷移させ、ダミー小窓を閉じる感じになります。

表示サンプルはこちら

上記方法について参考にさせていただいたのは、こちらですが、この手順だけだと、IE5.5(SP1,SP2含む)の場合、親ページのURLを遷移させ、ブラウザの「戻る」を使用して戻り、再度リンクをクリックすると、mshtmled.dllにエラーが出てIEが終了することがあります。
必ず再現するかどうかわかりませんが、IE5.5エラーも試してみたい方は、このサンプルページへ。

どうやら戻った時に、子ページのリンクがアクティブ状態（フォーカスが当たっている）のがいけないようです。
サンプルでは、親ページに名前をつける際、同時にフォーカスを移動させて回避するようにしています。
参考までにキャプチャ。

エラーが出たサンプルでブラウザの戻る使った状態。小窓でクリックしたリンクがアクティブになっています。
この状態でIE5.5で別リンク（非アクティブ）を再度クリックすると当方の環境で非常に高い確率で上記エラーがでます。いまどき、こんなブラウザ使う人いるんか？　と思いつつ、知らん顔もできず、対処することに。
当初、戻る際に、document.activeElement.id 等を利用して、アクティブなリンクを取得し、blur()で解除してみたんですが、だめだったので、focus()を使用。

親ページロードの際、フォーカスを移動させるようにして戻った状態。

このサンプル、動作はするんですが、、、小窓が一旦開いて閉じますので、イマイチかっこ良くない＋何だかアヤシイ感じです。

解決法２：OBJECTタグに固執しないでもいい場合

このサイトのように、XHTML 1.0 Transitionalなら、ワタシのようにもの好きなことをせず、素直にIframeが無難です。また、SSIを利用するとか、cgi phpを利用するとか考えればいろいろあると思いますが、SSIやCGI等のサーバーサイドスクリプトが使えない場合でもOK、ということで、今回は、javascriptから、XMLHttpRequestで、外部ファイルを読み込み、出力することにします。

想定状況：

”普通の”HTMLをIframeの代替としてObjectタグで読み込ませたら
外部ファイルリンクがきちんと親窓で遷移しないことを発見しちゃったので、
すでに作成した外部ファイルはそのまま最短手順で処置。(親ファイルに３～４行差し込めば終了します）

※個人的にはわざわざゼロからこんな面倒くさい手順とりたくないです(^^ゞ
また、objectタグで読み込みが、サイト全体で使われているケースでは
ページ遷移の度に同じファイルの内容を取得して処理というのも無駄な感じはします。

方針：

ブラウザ判別後、
XMLHttpRequest が使えるIEなら外部ファイルを読み込み、
正規表現でbodyタグ間を切り出して、.innerHTMLで書き出す。
IE以外のブラウザはObjectタグ
それ以外は外部ファイルへのリンクだけを出力。
あとはjs OFF環境のためにnoscriptタグで外部ファイルへのリンクを書く。

(注1)XMLHttpRequestにはWinIE4から対応しているものの、
try～catch構文使用可なのはWinIE5upからで、WinIE4は使えない。
WinIE4は、自前エラー処理で、XMLHttpRequestを試みることにする。
↑いまどきそんな需要はないと思うけど;
(注2)HTMLのbody内部だけを抽出しなくても表示はできます。

表示サンプルはこちら

スクリプトファイルobjecttag2.js
（注）もし、ローカルマシン（非サーバー上）で動作確認をする場合には、このjs内の97～99行目
//コールバック
//if(request.status==0) shori_TargetIE(request);/*ローカルマシンでのテスト用*/
上記、コメントをはずして、直下の
if(request.status==200)shori_TargetIE(request);
をコメントアウトしてください。

解決法その１、その2サンプル一式ダウンロード

Objectタグを使用した際に、IE/Safari等で出現するスクロールバーを消したい人はここ

ご興味があれば、ご一緒にどうぞ。

Objectタグに関するw3c勧告
 ポカの続き-Objectタグ使用時のIEのリンクは親Window内で開かない
 表示確認で大ポカしているワタシ

« 幻想振動症候群：phantom vibration syndromeって | WEBデザイナー日記 | 年寄りと子供の好む配色考 »