Как вызвать функцию 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" от доступа к кадру с исходным кодом "http://my-localhost.com". Протоколы, домены и порты должны соответствовать.

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

Ответ 1

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

Ближе всего вы можете прийти, а затем, только если вы контролируете оба веб-сайта, необходимо передать сообщения между ними, используя веб-сообщения api.

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

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

addEventListener("message", receiveMessage, false);

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

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

Подробнее см. MDN

Ответ 2

Вы можете использовать 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