JavaScriptで子から親を変更（したように見せる）というのをやったので、メモ。
そして、このメモは某アレ用に書いたのを流用したので、ちょっと丁寧ｗ
今回のポイントは
- ID指定
- getElementById
の二つ。
まずは親のソース
<p id=”change”>このテキストを変更する</p>
変更したいところにはidで”change”とふってあります。つまり、親要素はIDを指定するだけ。
次に子のソース
<script type=”text/javascript”>
function change(){
window.opener.document.getElementById(“change”).innerHTML=”テキストが変わった！”;
}
</script><input type=”button” value=”親ウィンドウの値を変える” onclick=”change();” />
headタグ内にscriptタグでJavaScriptのユーザー定義関数として”change()”、bodyにはそのスクリプト”change()”をonclickで実行するbuttonを配置してあります。
ソース自体は非常にシンプルです。
では、JavaScriptのchange()の中を見てみましょう。
このJavaScriptの中も非常にシンプル
window.opener.document.getElementById(“change”).innerHTML=”テキストが変わった！”;
日本語に訳してみると、
（この）ウィンドウ.を開いたウィンドウ.の記述内容.のID(“change”)を取得して.そのHTMLの中身を”テキストが変わった！”で上書きしなさい
という意味、一応記述通りに.も入れてみましたが、document.getElementByID(string)で、記述されているHTMLの
ID属性のstringというIDを抽出するという感じです、で、その後ろのinnerHTMLこれはイメージとしては、取得したID属性のついているタ
グの中身という感じでしょうか。このサンプルの場合は、
<p id=”change”>このテキストを変更する</p>
pタグのid属性に”change”とついているので、innerHTMLは”このテキストを変更する”という部分になります。で、これをinnerHTML=”テキストが変わった！”で代入、つまり、上書きするという感じ。
getElementByIDのところをタグにしたりしても、おもしろいかもしれない。ちなみに、innerHTMLにはいろいろと制限があるっぽい。
あと、バスキュールさんちはこれをうまいこと使って、プラグインチェッカーと併せて、プラグインがない場合はそのままのHTMLを表示、ある場合はIDをごっそり上書きしてFlashを表示するという感じ。
だから、ソースをみてもHTMLが書いてあるだけで、Flashのタグが表示されない。さらに動的なコンテンツ（JavaScriptではないっぽいし、PHPでもないから、手作業で更新かもしれない@バスキュールさんち）でも同じようにできるし、JavaScriptで見た目上を変化させているだけであって、ソースが変化するわけではないので、サーチエンジンのクローラーはHTMLをみるという感じ。実は便利
ツイートRelated posts: