
いつも参考にさせていただいてます。
greyboxを使ってページを表示したいのですが、
使っているサーバーはjsファイルなどがアップロードできない、CMSサービスのサイトなので、
別のレンタルサーバーにアップロードしたjsファイルを読み込んで動かしたところうまくいきません。
模範例では、
-----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
<script type="text/javascript"><!--
var GB_ROOT_DIR = "./greybox/";
// --></script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
</head>
<body>
<h1>GreyBox サンプル</h1>
<a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]">
毎日就職ナビのページ表示
</a>
</body>
</html>
-----------------------------------
なのですが、パスを絶対パスに変えて
-----------------------------------
<link rel="stylesheet" href="http://mydomain/greybox/gb_styles.css" type="text/css" media="all">
<script type="text/javascript"><!--
var GB_ROOT_DIR = "http://mydomain/greybox/";
// --></script>
<script type="text/javascript" src="http://mydomain/greybox/AJS.js"></script>
<script type="text/javascript" src="http://mydomain/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/http://mydomain/gb_scripts.js"></script>
-----------------------------------
と変更しました。
成功例(jsファイル同一サーバー上):http://greybox.main.jp/test_ng/index2.html
失敗例(jsファイル別サーバー上):http://greybox.main.jp/test_ok/index1.html
対応方法をお教え下さい。よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
失敗している原因は、クロスドメインの制約によるものです。
別サーバのgreyboxを呼び出しているサーバをサーバ1、別サーバをサーバ2として、
具体的に何が起こっているかを説明しますと、
1.サーバ1のHTMLファイルのリンクをクリックした時にサーバ2のgb_script.js内でiframe要素が作られる
2.iframe要素のsrc属性は、サーバ2のloader_frame.html(greyboxフォルダ内にあります)
3.サーバ2のloader_frame.htmlの7行目でparent.GB_CURRENTにアクセス
ここで、parentはサーバ1のwindowオブジェクトになりますが、クロスドメインの制約により
別サーバのwindowオブジェクトにアクセスすることができません。
なので、loader_frame.html内でGBオブジェクトが作成されず、gb_urlにも値が入らないので
サーバ1のHTMLファイルで指定したURLにジャンプすることができません。
つまり、loader_frame.htmlファイルが別サーバに置かれているとダメなわけです。
gb_script.jsを見てみると、loader_frame.htmlのパスはGB_ROOT_DIRとなりますので、
greyboxフォルダのJavaScriptファイル以外をサーバ1にも置いて、
GB_ROOT_DIRにサーバ1のgreyboxフォルダを指定してやれば動くようになります。
サーバ2には、greyboxフォルダのJavaScriptファイルのみでOKです。
長くなってしまいましたがまとめますと、同一サーバにgreyboxのJavaScriptファイル以外を置いて、
別サーバにgreyboxのJavaScriptファイルだけを置いて、以下のコードを書けば動きます。
(gb_styles.cssを別サーバに置いた場合はそのURLを指定してください。)
<link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
<script type="text/javascript"><!--
var GB_ROOT_DIR = "./greybox/";
// --></script>
<script type="text/javascript" src="http://mydomain/greybox/AJS.js"></script>
<script type="text/javascript" src="http://mydomain/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="http://mydomain/gb_scripts.js"></script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
サイトにアクセスした際、数秒...
-
HTMLに記載したいjavascript
-
IEだけjsファイルを読み込まな...
-
補足です。
-
日本語記述が出来ません(XML?)
-
javascriptの多用によるページ...
-
CrossSlideが起動しません。
-
教えてください! lightboxとsk...
-
base64encodeでの文字化けについて
-
wordpressでJavascriptのフラッ...
-
jqueryプラグインの設置方法
-
jqueryについて(Lightboxとbxs...
-
fc2blogで
-
map とlightbox
-
jQueryとprototypeの共存
-
<a href="#" …>の意味を教えて...
-
Vbscriptで自分自身のウィンド...
-
フレームをこえるポップアップ
-
スマホ上で、左右スワイプで次...
-
MovableTypeで月間ログを表示し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのcolorboxを読込直後に...
-
サイトにアクセスした際、数秒...
-
jquery ui.resizable 使い方
-
base64encodeでの文字化けについて
-
スライド写真で2、3枚目をラ...
-
jQuery が動作しません。
-
jQueryと他のライブラリを同時...
-
マスターページでのJavaScriopt...
-
jquery select要素のdisplay:no...
-
jqeryのslicksliderのパスにつ...
-
javascriptとjuaryを同時に
-
Javascriptのエラーに悩まされ...
-
<div>のタッチ状態を維持したま...
-
javascript 引用符
-
JavaScriptで背景や文字色を色→...
-
jqueryとlightboxが一緒に動作...
-
Base64に変換したHTMLの<script...
-
jQueryBlockUIをフレーム内で動...
-
mootoolsとjQueryの共存がうま...
-
ヤフーのジオの広告のような技法
おすすめ情報