Как вызвать функцию JavaScript родительского окна внутри iframe

вот мой код http://my-localhost.com/iframe-test.html

<html>
<head><title>Welcome Iframe Test</title></head>
<body>
<iframe src="http://www.my-website.com/index.html" width="500" height="500"></iframe>
<script type="text/javascript">
function alertMyMessage(msg){
    alert(msg);
}
</script>
</body>
</html>

здесь код http://www.my-website.com/index.html

<html>
<head></title>Welcome to my Server</title></head>
<body>
<h1>Welcome to My Server</ht>
<a href="javascript:void(0)" title="Click here" onClick="parent.alertMyMessage('Thanks for Helping me')">Click Here</a>
</body>
</html>

когда я нажимаю ссылку" нажмите здесь". я получил следующую ошибку.

Uncaught SecurityError: заблокирован кадр с происхождением "http://www.my-website.com " от доступа к кадру с origin "http://my-localhost.com". Протоколы, домены и порты должны совпадать.

пожалуйста, помогите мне исправить эту проблему, или дайте какое-нибудь другое решение для этого.

10
cross-domain html iframe javascript

2 ответов

вы не можете получить доступ к DOM страницы, загруженной в кадре в другом происхождении. Это заблокировано по соображениям безопасности (Представьте себе случайный веб-сайт, который вы посетили, открыв службу веб-почты в скрытом iframe, и вы можете понять, почему).

ближайший вы можете прийти, и то только если вы контролируете оба веб-сайта, чтобы передавать сообщения между ними с помощью api веб-сообщений.

на одной странице напишите функцию для обработки сообщений, а затем добавьте ее в качестве сообщения слушатель события.

function receiveMessage(event)
{
  alert(event.data);
}

addEventListener("message", receiveMessage, false);

в другом, отправьте сообщение:

parent.postMessage("This is a message", "*");

посмотреть MDN для получения дополнительной информации

17

вы можете использовать postMessage!

родитель

if (window.addEventListener) {
    window.addEventListener ("message", receive, false);        
}
else {
    if (window.attachEvent) {
        window.attachEvent("onmessage",receive, false);
    }
}

function receive(event){
    var data = event.data;
    if(typeof(window[data.func]) == "function"){
        window[data.func].call(null, data.params[0]);
    }
}

function alertMyMessage(msg){

    alert(msg);
}

окне iframe

function send(){
    window.parent.window.postMessage(
        {'func':'alertMyMessage','params':['Thanks for Helping me']},
        'http://www.my-website.com'
    );
}

ссылка

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

11