別画面の関数の呼び出し

質問

下記は実現可能でしょうか？
また実現可能であれば具体的な例をお教えください。

A.html※Cボタンを保持している
B.html※D関数（javascript）を保持している

(1)A.htmlのCボタン押下で、B.htmlの持つD関数（javascript）の呼び出し
(2)A.htmlからB.htmlへの遷移もしくはポップアップ表示

以上、よろしくお願い致します。

回答No.4

think49 · ベストアンサー

> B.htmlに関しまして、Yahooのログインのようなイメージです。
> つまり、こちらからソースの改変等は一切できません。
なるほど。合点がいきました。

であれば、#1さんの紹介されている第二の方法。
フレーム内の関数コールで実現できると思います。

*iframe内の関数を呼び出す
(初めて書いたのでもっと上手い書き方があるかもしれませんが、動作確認済みです。)

------- A.html -------
<iframe id='B' style='display:none;' src='B.html'></iframe>
<script type='text/javascript'>
function init(){ // contentWindow.func()
document.getElementById('B').contentWindow.D();
}
function init2(){ // contentDocument内にあるscript要素のテキストノードをeval()
var script = document.getElementById('B').contentDocument.getElementsByTagName('script')[0].firstChild.nodeValue;
eval(script);
D();
}
if(typeof window.addEventListener == 'function'){
window.addEventListener('load', init, false);
} else if(typeof window.attachEvent == 'object'){
window.attachEvent('onload', init);
}
</script>
---------------------
------- B.html -------
<script type='text/javascript'>
function D(){
alert('This is B.html');
}
</script>
---------------------

eval() はおまけです。
同名関数を定義していた場合に上書きしてしまう問題があることと、
この書き方ならiframeに拘る必要がない(Ajaxならhtmlを汚さない)ので中途半端な気もしますが、参考までに。

これらの方法で B.html に submit(); されるどうかまでは検証していません。(A.htmlにsubmitしてしまうかも)
B.htmlに submit(); されたとしても、<iframe style='display:none;'> に C.htmlが読み込まれる問題があります。
なので、iframeがC.htmlになったら、A.html から C.html にリダイレクトさせる処理が必要だと思います。

そこまでするなら、AjaxでB.htmlのソースを拾ってきて、B.htmlの<form>をにA.htmlに再現する方がスマートかもしれませんが。
# 一応、JavaScriptのクロスドメイン制限はFlashを利用することで回避できます。
# http://firegoby.theta.ne.jp/archives/224

回答No.5

think49

#4の補足です。

> そこまでするなら、AjaxでB.htmlのソースを拾ってきて
iframeのHTMLでも拾えます。

document.body.appendChild(document.getElementById('B').contentDocument.getElementsByTagName('form')[0]);

お礼

返答が遅れ申し訳ありません。上記方法にて実現できました！
どうもありがとうございました。

回答No.3

think49

#2です。#1の補足を読みました。

> 現状、行いたいのはA.htmlを開くことでB.htmlというログイン画面を表示しないでB.html以降の後段画面に進む。ということです。
つまり、こういうことでしょうか？

* 期待する動作
1. A.html から B.html に遷移
2. B.htmlのJavaScriptによる submit(); で C.html に遷移

------------
/* A.html */
location.href = 'B.html'; // 遷移

------------
/* B.html */
// ページ読み込み終了後、D() を実行する
function D(){
document.forms[0].request.value ="XXXX";
document.forms[0].submit();
}
if(typeof window.addEventListener == 'function'){
window.addEventListener('load', D, false);
} else if(typeof window.attachEvent == 'object'){
window.attachEvent('onload', D);
}
------------

遷移でいいのならこれで希望通りな気はするのですが、
この場合、A.html は B.html へのリダイレクタとしての機能しか果たせないので、初めから B.html を開くようにリンクを貼っても機能してしまいます。
(window.openならまた少し話は違いますが)

何か別の要求仕様があるような気もするのですが…。

補足

すみません。また説明不足で申し訳ありません。
B.htmlに関しまして、Yahooのログインのようなイメージです。
つまり、こちらからソースの改変等は一切できません。
以上を勘案の上で、A.htmlからB.htmlの関数Dをコール出来るか否かというところが質問の真意となります。
#1さんの回答を見る限り無理そうな気がしますね。。。

回答No.2

think49

(1) は既に回答されているように外部JavaScriptを使うのがいいかな、と思います。
なので、(2)だけ。

> (2)A.htmlからB.htmlへの遷移もしくはポップアップ表示

// 遷移
location.href = 'B.html';

// ポップアップ
window.open('B.html','_blank');

これでどうでしょうか？(動作確認済み)

お礼

回答ありがとうございます。
参考にさせていただきます。

回答No.1

yambejp

＞(1)A.htmlのCボタン押下で、B.htmlの持つD関数（javascript）の呼び出し

B.htmlが呼ばれていないので、できません。
運用上jsは外部化してある場合が多いと思います。
であればB.htmlから呼び出しているjsがB.jsであれば、
A.htmlからB.jsをscriptタグで読み込んでしまえば関数を再利用
することは可能です。

また、場合によりますがフレーム系の処理をつかえば、参照する
ことは可能です。

＞(2)A.htmlからB.htmlへの遷移もしくはポップアップ表示

これは普通にできません？
どこでつまっているかわからないのでなんとも言えませんが・・・

補足

説明が不十分で申し訳ありません。
現状、行いたいのはA.htmlを開くことでB.htmlというログイン画面を表示しないでB.html以降の後段画面に進む。ということです。
ですので、処理上の順番は(1)⇒(2)となります。

また、D関数の中身は以下のようになっており、

function D(){
document.forms[0].request.value ="XXXX";
document.forms[0].submit();
}

上記をA.htmlより呼び出し後、遷移もしくはポップアップを行いたいと思っています。
ですので、D関数を呼び出すかもしくは子画面に対して上記の値セット+サブミットが行えないかどうかが今回聞きたい内容となります。
ご存知でしたらお教えください。