- ベストアンサー
XHTML-<Object>で埋め込んだファイルのリンク(js併用)が誤動する
お世話になります。 html/css(下の)中級+js初級者です。 環境:MacOSX、Firefox、Safari、エディタ/ミミカキ(ビルダは使ってません。貧) CSSとobject(あと、ちょっとjs)を駆使してフレームなし、target タグ無しのXHTMLの仕様に近い(W3Cのチェックは通らないです)デザインを目指して組んだのですが、いざ他のマシン(Win XP Home)でwebから表示したらナビゲーション部分の埋め込みファイル: <object data="000-navi.html" type="text/html" width="170" height="600"></object> のリンクが親ウィンドウに開かず、ナビの狭いスペースに次のページが表示されてしまいます。MacからだとFireFoxでもSafariでも問題なく表示されるのですが、ラップトップのWin(XP Home)だと上述のような問題が発生します。jsの設定を変えると新ウィンドウで開く事は出来るのですが、これだとクリックのたびに新ウィンドウが出て散らかってしまいます。 今の所決め手になる解決法が見当たらず、かくなる上はナビ部分のコード全てを各ページに「直打ち」しなきゃダメなのかしらん、なんて思っています。(それはいや。) でも本当にこんな回りくどい方法しか無いんでしょうか? 以下のリンクからデモが見られます。自分のからMacだとOKで、Winだとダメです。私のWin環境のせい?? http://kinugosiigomadowff.arrow.jp/miscsc/goo20081226/000-oshiete-top.html W3C非推奨でも実装で動けば良いので、(X)HTML、CSS、jsの範疇で何か方法があればご教示ください。どうか宜しく。m(_ _)m れざ
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
インラインフレームのつもりで書かれているようなので、インラインフレームそのもの(<iframe>)を使う方がいいのではないでしょうか。 XHTML-Transitionalならフレームもtarget属性も使えます。 もしくは、目的にもよりますが、SSIかCSIが無難かもしれません。 CSIについては「JavaScript CSI」で検索してください。 <object>の扱いは、W3C定義のHTML/XHTMLには「このように表示・動作せよ」とは書かれておらず、全てブラウザ任せです。 どうしても<object>で、というのであれば、 ブラウザの仕様書を確認するか、ブラウザの動作からその仕様を推測し、 それに合わせて、違うHTML/XHTMLやスクリプトを書かないと行けないと思います。 ブラウザのバージョンの違いで仕様・表示・動作が変わることもありますので、注意が必要です。
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
説明だけ見ると記述の仕方がわからない(しかもこの質問サイトは個人サイトへのリンク禁止なので見れない)のでなんとも言えないけれど 挙動としては間違ってないよ。 objectによって埋め込んでるhtmlは形こそobjectだけれど 結果的に「iframeを使っているのと同じ」動作をする筈だからね。 試した事は無いけどobjectで埋め込んでる 000-navi.html とやらのリンクで target=_top としてそう動くならそのブラウザは埋め込んだhemlのobjectをiframeに変換しているね。
お礼
おかげさまで無事に解決しました。アドバイス有り難うございました!
補足
SAYKAさん、お世話になります。個人のリンクに飛べないのは知りませんでした(私のマシンからだとgooページからのリンク生きているみたいですが...)。jsを読んでいる部分を target="_top" に書き換えても、Macでは正常に動作しますが Win だとダメです。 トップページのコードは以下のようになってます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <meta name="keywords" content="おせーて" /> <meta name="description" content="おせーて" /> <title>おせーて TOP</title> <link rel="stylesheet" href="00_00style-page.css" type="text/css" /> <link rel="stylesheet" href="style-scroll.css" type="text/css" /> <link rel="stylesheet" href="000style-header.css" type="text/css" /> </head> <body> <div id="mainpage"> <div id="header-menu-osee"> <ul> <li><a href="000-oshiete-top.html">TOP</a></li> <li><a href="#">かてごり1</a></li> <li><a href="#">かてごり2</a></li> <li><a href="#">かてごり3</a></li> <li><a href="#">かてごり4</a></li> <li><a href="#">かてごり5</a></li> <div id="header-menu-title-osee"> <a href="000-oshiete-top.html">おせーて goo!</a> </div> </ul> </div> <div id="containerpage"> <div id="contentspage"> <div id="scroll"> <div id="scroll-body"> <p>本文。</p> </div> </div> </div> <!-- なび --> <div id="menu-osee"> <h1> なび</h1> <!--*** 下記に"000-navi.html"↓のbody部分を記述しました ***--> <object data="000-navi.html" type="text/html" width="170" height="600"></object> </div> </div> <div id="footer"> Copyright (C) 2008 れぃざーでぃすく All Rights Reserved. <a href="#">れざ</a> </div> </div> </body> </html> ****************************************** 000-navi.html <body> ~ </body> 部分 ****************************************** <!--jsで疑似 target 効果--> <script type="text/javascript" src="js/external.js"></script> <body> <div id="menuobject"> <p><a href="000-auu-frame.html" rel="external">●あう~</a></p> <p><a href="000-nuoo-frame.html"" rel="external">●ぬを~</a></p> <br /> </div> </body> </html>
お礼
テストの末、おっしゃる通りiframeで組んでみることにしました。おかげさまで恐れていたような大改装はしなくて済みそうです。どうも有り難うございました(^^)/!
補足
talooさん、お世話になります。 iframe は大丈夫みたいです!(^^)。有り難うございます。CSSの勉強のつもりで組んでたもので、頭がそっちに行きませんでした。。。どこで覚えたのか、iframe も target と同じ末路を辿る(フェーズアウト)ように思っていましたが...まあ(Trasitional)っていうくらいですから長期的にはそうなんでしょうけど。 > <object>の扱いは...全てブラウザ任せです。 おっ、それは知らなかった。以後気をつけます。今回はMacで快調に組んでいて、最終段階でWinで試したら(ウギャ~)だったという。素人の哀しさで検証はお留守になりがちですが、今回のでちょっと身に染みました(^^;)