arrow_upward
closeサイドバー無

iframeで子から親の関数を呼び出したい

親ページ(parent.html)と子ページ(child.html)があるとして、親から子をiframeで設定します。
下記コードは親の関数を呼び出して親ページに入力した文字を表示するようにしています。
親ページと子ページが同ドメインに限ります。別ドメインだと無理です。


親のページを下記のように設定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>親ページ</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
function setParent(val){
    $("#divParent").text(val);
}
</script>
</head>
<body>
<iframe id="d" src="child.html"></iframe>
<div id="divParent"></div>
</body>
</html>

子のページを下記のようにする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>子ページ</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
$(function(){
    $('#btnChild').on('click', function(){
        if(!window.parent){return;}
        window.parent.setParent($('#txtChild').val());
    });
});
</script>
</head>
<body>
<input type="text" id="txtChild" />
<input type="button" id="btnChild" value="クリック" />
</body>
</html>
親に指定要素が存在するかチェックしたい場合は、
if($('#親の要素',parent.document).length==0){
//存在しない場合
}
で確認することができます。

2017/10/30:親に指定要素が存在するかチェック方法を追加しました。
2017/10/24:サンプルページの追加と例をアラートから文字表示に変更しました。
2017/05/23:ページの作成

関連記事

0 件のコメント:

コメントを投稿