前提・実現したいこと

iframe構造のHTMLがあり
（以下、iframe設置側を親、iframeに呼び出されているページを子とする）
子に設定されているイベントを親側から発生させたい

発生している問題・試したこと

子側でのイベントは正しく設定されており、子自身によるtriggerであれば期待通りに動作します。
それと似た形で親から同じようにtriggerしたいのですが、うまく動きませんでした。（下記コードの①）

いろいろ調べてこちらを参考にしてみましたが、これもうまくいきません。（下記コードの②）
解釈が間違っているのでしょうか…。
https://qiita.com/MasamotoMiyata/items/7d832a363ce3bbd245ac

OSはWindows10、ブラウザは以下で確認しています。

GoogleChrome 68.0
Firefox 61.0

該当のソースコード

【iframeの親】test.html（body内抜粋）

HTML
1<!-- iframeで子htmlを呼び出し -->
2<iframe id="testiframe" src="child.html" name="testname"></iframe>
3
4<!-- jQuery読み込み -->
5<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
6<script>
7// 子iframeのロードが完了したら、子の「#clickarea」をダブルクリックしたことにしたい
8$('#testiframe').load(function(){
9	// この部分をなんとかしたい ///////////////////////////
10
11	// ①単純に、対象のオブジェクトにそのままtriggerを渡してみる
12	// 　→反応なし
13	$("#testiframe").contents().find("#clickarea").trigger("dblclick");
14
15	// ②調べた内容をもとに書き換えてみる
16	// 　→エラー「document.testname is undefined」
17	document.testname.$(document.testname.document).find("#clickarea").trigger("dblclick");
18
19	///////////////////////////////////////////////////////
20});
21</script>

【iframeの子】child.html（body内抜粋）

HTML
1<!-- ダブルクリックの対象エリア -->
2<div id="clickarea">ここをダブルクリック</div>
3
4<!-- jQuery読み込み -->
5<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
6<script>
7// ダブルクリックされたときのイベント
8$("#clickarea").on("dblclick", function(){
9	console.log("ダブルクリックされました");
10});
11
12// ここで実行した場合は動く
13// $("#clickarea").trigger("dblclick");
14</script>

ご存知の方、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#testiframe').addEventListener('load', function(){
4    with(window["testname"]){
5      HTMLElement.prototype.trigger=function(eventStr){
6        if (document.createEvent) {
7          var e = document.createEvent("HTMLEvents");
8          e.initEvent(eventStr, true, true );
9          return this.dispatchEvent(e);
10        } else {
11          var e = document.createEventObject();
12          return this.fireEvent("on"+eventStr, e);
13        }
14      };
15      document.querySelector('#clickarea').trigger('dblclick');
16    }
17  });
18});
19</script>
20
21<iframe id="testiframe" src="child.html" name="testname"></iframe>

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(){
3  document.querySelector("#clickarea").addEventListener("dblclick", function(e){
4    console.log("ダブルクリックされました");
5  });
6});
7</script>
8<div id="clickarea">ここをダブルクリック</div>
9

jQueryバージョン

javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('#testiframe').on('load', function(){
5    testname.$('#clickarea').trigger('dblclick');
6  });
7});
8</script>
9<iframe id="testiframe" src="child.html" name="testname"></iframe>

javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $("#clickarea").on("dblclick", function(){
5    console.log("ダブルクリックされました");
6  });
7});
8</script>
9<div id="clickarea">ここをダブルクリック</div>
10