私のインデックスhtml:
<html>
<head>
<title>index</title>
<script src="jquery.js"></script>
</head>
<body>
<h1>Index</h1>
<hr/>
<iframe id="frame"></iframe>
<hr/>
<button id="btn">Click</button>
<script>
$(function(){
window.api = {
fun: function(){alert('index api')}
};
var frame = document.getElementById('frame');
frame.src = 'frame.html';
});
$('#btn').click(function(){
$('#frame').contents().find('body').css('backgroundColor', 'red');
$('#frame').contents().find('#btn').text('lol');
});
</script>
</body>
</html>
ロードされframe.html
た JavaScriptでは、api
を介してオブジェクトにアクセスできますparent.api
。
api オブジェクトを frame.html ウィンドウに追加して、そこからアクセスできるようにすることはできますwindow.api
か? (ではないparent.api
) (同じオリジンと異なるオリジンを考慮)?
上記のコードは機能しますが (#button
背景とラベルの変更など)、これらのドキュメントがすべて私の PC にある (同じオリジン) ためだと思います。私は正しいですか?