ドメインの違うiframeタグ内ページ（子ページ）で特定の動作をした時にiframeを記述してるページ（親ページ）でjQueryを発火させる。

どうも、レーウィンです！最近記事書けてないけど生きてます！最近休みなくてやばい（真面目に）
今回はiframeに関する記事を書いていきます。

ドメインの違うiframe内での動きに対して親ページを発火させようとすると、基本的に無理

$(function() {
	if("iframe .btn").click(function() {
		$("iframe .text").addClass("click_on")
	});
});

親ページで上記のことをやろうとしても基本的には無理です。
理由としてはブラウザ側のセキュリティが原因です。
なんでセキュリティが関係あるの？という疑問がある方は、こちらの記事が参考になります。Tsuyoshi Matsuzaki様、素晴らしい記事をありがとうございます。
まあ、細かいこと抜きでざっくり言うと、違うドメインのものがiframe等を使用し、javascriptを使ったりしてデータを操作することは、基本的に無理ということです。

でもiframeタグ内での動きに合わせて親ページをあれこれしたい

例えばiframe内でリンクのボタンを押すと、親ページは変わらず、iframeの中でページ遷移が発生します。
ですが、iframeでリンクを押したら親ページのURLが変わってほしいという場合があると思います。
こうした場合、iframe内ボタンをクリックした時に親ページのjavascirptが発火し、window.location.href等を使用してページジャンプをしたいわけですが、クロスドメインのため無理になってしまいます。
じゃあどうしたらいいのかというと、以下の方法で解決できます。

.postMessageを使ってクロスドメインを解決させる

.postMessageはjavascriptに用意されたクロスドメイン解決用のコードになります。

子ページ（iframeで読み込むページ）に書く内容

基本的な書き方は以下

window.postMessage("value","target")

valueの部分には送る値を、targetには送り先を書きます。
iframeで親に値を送る場合は

window.parent.postMessage("value","target");

こうなります。
例えば、iframeでtest-reiwinn.netをreiwinn-web.netで読み込み、test-reiwinn.net読み込み完了時に「”loadComp”」という値をreiwinn-web.netに送るとします。
その場合、test-reiwinn.netの方に

$(function() {
	$(window).on("load", function() {
		window.parent.postMessage("loadComp","reiwinn-web.net");
	});
});

と書けばiframe内の読み込み完了時にreiwinn-web.net宛に「”loadComp”」という値が送られます。

親ページ（irameタグを記述するページ）に書く内容

window.addEventListener('message', function(e) {
	// 何かしらMessageを受信した時に発火する
}, false);

どういう値にしろ、子ページからpostMessageでこのページに値が送られた場合は常軌が発火します。
このeの中に色々な情報が入っていますので、例えば

window.addEventListener('message', function(e) {
	alert(e.origin);
}, false);

とするとメッセージを送ってきたURLがアラートとして表示されます。

window.addEventListener('message', function(e) {
	alert(e.data);
}, false);

こうすると送られてきたデータの値がアラートとして表示されます。

例

①reiwinn-web.netでtest-reiwinn.netをiframeで読み込んでいるとします。
①iframeで読み込まれたtest-reiwinn.netの.btnをクリックしたら親ページreiwinn-web.netのURLがtest-reiwinn.netに変わるということをしたいです。
という場合、
test-reiwinn.netに書くjavascript

$(function() {
	$(".btn").on("click", function() {
		window.parent.postMessage("btn_click","reiwinn-web.net");
	});
});

reiwinn-web.netに書くjavascript

$(function() {
	window.addEventListener('message', function(e) {
		if(e.origin == "test-reiwinn.net" && e.data == "btn_click") {
			window.location.href = e.origin;
		}
	}, false);
});

こんな感じになります。

参考になれば！ではでは～