- ベストアンサー
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 れざ
- laser-disc
- お礼率62% (42/67)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （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>
関連するQ&A
- XHTMLで外部JSファイルを読み込むには？
XHTMLで外部JSファイルを読み込むには？ よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!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"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか？？ アドバイス頂ければ幸いです。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- XHTML1.1に於いてのobject要素の操作
WEBページ作成初心者?（独学ではや6年以上…）です。 ちょこっとJavaScriptを使ったページを作ってます。 余り意味は理解していません。こう言うのにはこれって感じです… 普通にXHTML1.0ですとiframeを使って、画面を作りだし、リンクをクリックすると リンク内のtarget指定によりiframe内に違う情報（ページの変更）を出せます。 これをXHTML1.1においてobject要素だけでは無理なようです。 （object要素に違うページは表示できますがリンククリックしても新しいwindowでしか出ません） これをJavaScriptを利用して、以前の様なフレーム構造を実現するコードを調べているのですが さっぱり見つける事が出来ません… かつ自分で開発する知識も無く、申し訳ないのですが、お知恵をお借りしたいと思い投稿しました。 色々別ページを操作するJavaScriptは調べて試してみたのですが、 何分知識と書籍が無く（中身を見ないと有益な情報かどうかわかりませんし、 田舎な物でこう言った専門的な参考書が殆ど売ってません…） どうかお知恵をお貸し下さい。お願い致します…
- ベストアンサー
- JavaScript
- win/IE6でのみ特定のページが真っ白になります。
winのIE6でのみ（macのIE5/safari／Firefoxは正常です。） 特定のページが真っ白になります。 charsetはShift-JIS js、css、cgi（メールフォーム部分）を 外部から読み込んで？いるページです。 cssは他の表示されるページとほぼ同じものなので、 jsかメールフォーム部分のcgiが何か悪いのかな？と思っているのですが… エンコード→「日本語（EUC）」に変更すると、 文字化けの状態のもので見れます。 何が問題なのでしょうか？教えてください。 当方、初心者です。宜しくお願いします。
- ベストアンサー
- インターネットビジネス
- jsファイルでfaviconを指定したいのですが
複数のhtmlの共通部分を、別のjsファイルから読み込み、表示させるよう指定しています。 このjsファイルの中に、<head>～</head>の中身まで入れることはできますか？ 具体的には、link要素でのfaviconとcssの読み込みをhtml側ではなく、jsファイル側に記述することはできますでしょうか？
- 締切済み
- JavaScript
- safari でcssがききません！
こんばんは。 仕事でサイトを作っているのですが、Macのsafariでだけまったくcssが効かないという現象にぶちあたってしまいました。 下のように、外部cssを読み込み、文字サイズはcss.jsでwin、mac向けに指定してます。（文字サイズは表示されてます） <link rel="stylesheet" type="text/css" href="css/default.css"/> <script language="javascript" type="text/javascript" src="js/css.js"></script> Macのfirefoxではなんの問題もありません。 cssは覚えたてて経験浅く、どのあたりに原因があるのかさっぱり分かりません…。 どなたか、解決法、参考サイトなどありましたら、教えてください！ よろしくお願いします。
- 締切済み
- HTML
- 文字サイズの大中小について
お世話になります。 今、ホームページを作成しているのですが… ホームページ上で、文字のサイズを簡単に切り替えられる様にしようと思い、探してみたところ、styleswitcher.jsというJavascriptがあったので貰ってきました。 http://alistapart.com/stories/alternate/ ここからstyleswitcher.jsをいただいてきました。 文字の大きさが大、中、小になるように.cssファイルを３つ作り、拡張子.cssはcssフォルダに、拡張子.jsはjsフォルダに分けていれています。 <head> <script type="text/javascript" src="js/styleswitcher.js"></script> <link href="css/main_small.css" rel="stylesheet" type="text/css" title="small" /> <link href="css/main_normal.css" rel="stylesheet" type="text/css" title="normal" /> <link href="css/main_large.css" rel="stylesheet" type="text/css" title="large" /> </head> という風に、ヘッダーのところにリンクを貼りました。 IE、Firefox、Opera、safari(windows用）では、動作確認が出来たのですが、ＮＮ７だけが動きませんでした。 設定を確認したところ、Javascriptを有効にするにはチェックがついていました。 設定のところでＯＫを押してから、切り替えボタンを押すと文字サイズが切り替えられるのですが、違うページに移動してしまうとその機能は動きません。 正直、Javascriptについての知識は全くなく、何がおかしいのか検討も付きません。 googleで何か情報がないか探してみたのですが、Firefoxに問題がある文章はいくつか見かけたのですが、NNに関する情報は見つけられませんでした。 各ブラウザにもいろいろ特徴があるから、動かなくても仕方ないのかな？ でも、ＮＮユーザーの為にも何とかしたいなぁと思いますし、一体どうしたら良いのか困ってます。 大変申し訳ないのですが、どなたかアドバイスをいただけませんでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- Macfirefox3とMacfirefox2以下でCSSを切り替えたい
MacのFirefox3は、Firefox2までとはデフォルトフォントサイズが 違うので、Firefox3とそれ以外のFirefoxで分けたいです。 今まで、CSSを以下のスクリプトでブラウザ別に分岐していました。 MacのFirefox3の分岐を増やしてみたのですが、それ以外のFirefoxのCSSに 分岐されてしまいます。 あまりJavascriptに明るくないので、 どうしてわかれてくれないものか困っています。 どうぞお知恵をお貸し下さい！ ↓以下、かいてみたソースです。 var Win=(navigator.userAgent.indexOf("Win")!=-1); var Mac=(navigator.userAgent.indexOf("Mac")!=-1); var Explorer=(navigator.appName.indexOf("Explorer")!=-1); var Firefox=(navigator.userAgent.indexOf("Firefox") !=-1); var Netscape=(navigator.appName.indexOf("Netscape")!=-1); var opera=(navigator.userAgent.indexOf("Opera")!=-1); var safari=(navigator.userAgent.indexOf("Safari")!=-1); var Version=navigator.appVersion.charAt(0); if(safari){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Explorer && Version=="6"){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && Firefox){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && opera){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } /*増やしたところ*/ else if(Mac && Firefox && Version=="3"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); }/*増やしたところ終わり*/ else if(Mac && Firefox){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && opera){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/win_nn.css" type="text/css">'); } else if(Mac && Explorer && Version=="5"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Mac && Netscape && Version=="7"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else{ document.write('<LINK rel="stylesheet" href="/css/font.css" type="text/css">'); }
- ベストアンサー
- JavaScript
- Safariの表示と他ブラウザの表示の違い
HPを制作し、その表示確認にはwinのIE/NN/Firefox/Opera、Mac/IEを使用していますが、Safariで確認できる環境にありません。Safariってどんな感じでしょうか？上記で確認してOKなら、Safariでも大丈夫（そうな）感じですか？また、CSS等の扱いで、Safari独特のものなどもしあればお伺いしたいのですが。
- ベストアンサー
- CSS
- styleswitcherについて
CSSが切り替えられるstyleswitcherというJavaスクリプトを使ってみたのですが、きちんと動作しません。 症状としては、 初めにページを開いた時はCSSが効いていない状態で、 切り替えるリンクを押すとCSSが効くといった具合です。 ブラウザのJavaスクリプトをOFFにすると、デフォルトのCSSが効いて表示されます。 http://www.zakimi.com/archives/2004/06/05/214447.php こちらに書いていただいているとおりに設置したのですが、どなたか初めからきちんと表示される方法をご教示いただけませんでしょうか？ Windows XPでSP2、IE6の環境です。 ちなみに、FireFoxでは初めから表示されます。 よろしくお願いします。
- 締切済み
- JavaScript
- 【CSSハック】アンカーポイントの位置をずらしたいのです
WIN IEのみで失敗してしまうCSS問題についてご質問させてください！ 『ページ内アンカーリンクのポイントをブラウザ画面トップから100pxほど下にずらしたポイントに表示したい』 というのも、ブラウザ画面トップにposition:fixed;のオブジェクトを配置しているため、 アンカーリンクでページ内ジャンプした際に先頭部分が上記オブジェクトの後ろに隠れてしまうのです。 <a name="XXXXX" id="anchor"><img src="XXXXXXX"/></a> このタグに対してのCSSは #anchor{ position:relative; top:-100px; left:0; } このコマンドで Mac環境（safari / Firefox） Win環境（Firefox） では成功したのですが、IE6 / IE7では認識せず、スクロールバーがなぜか２本重なるバグ？が表示されるのです。 このような現象の原因と対策がございましたらお教えいただきたいです。 どうぞよろしくお願いします！ （横２つ割のインラインフレームは可能なら使いたくないのですが、他に方法がなかったら仕方ないのでしょうか。。）
- 締切済み
- CSS
お礼
テストの末、おっしゃる通りiframeで組んでみることにしました。おかげさまで恐れていたような大改装はしなくて済みそうです。どうも有り難うございました(^^)/！
補足
talooさん、お世話になります。 iframe は大丈夫みたいです！(^^)。有り難うございます。CSSの勉強のつもりで組んでたもので、頭がそっちに行きませんでした。。。どこで覚えたのか、iframe も target と同じ末路を辿る(フェーズアウト)ように思っていましたが...まあ(Trasitional)っていうくらいですから長期的にはそうなんでしょうけど。 > <object>の扱いは...全てブラウザ任せです。 おっ、それは知らなかった。以後気をつけます。今回はMacで快調に組んでいて、最終段階でWinで試したら(ウギャ～)だったという。素人の哀しさで検証はお留守になりがちですが、今回のでちょっと身に染みました(^^;)