Target parent div, содержащий iframe из iframe

Question

Так что в принципе у меня есть что-то вроде этого

<div class="iframe-holder">
    <span></span>
    <iframe src="iframe.html" width="200" height="200"
</div>
<div class="iframe-holder">
    <span></span>
    <iframe src="iframe.html" width="200" height="200"
</div>
<div class="iframe-holder">
    <span></span>
    <iframe src="iframe.html" width="200" height="200"
</div>
<script>
    function where_am_i(iframe_parent_div,msg){
        $(iframe_parent_div).find('span').html(msg);
    }
</script>   

, а затем в моем iframe-holder.html у меня есть это

<a href="#" id="msg">Show Message In Parent Div</a>
<script>
    //i want to basically imp
    $('msg').click(function(event){
        event.preventDefault();
        var iframe_parent_div=???;//how do I get this?
        parent.where_am_i(iframe_parent_div,'This is where this iframe is');
    });     
</script>

Таким образом, в основном мой вопрос заключается в том, как я могу настроить таргетинг на родительский div (div.iframe-holder) экземпляра iframe, с которого я нажимаю кнопку «Показать сообщение»? Это вообще возможно?

Я знаю, что могу послать через источник переменную с индексом, например, iframe.html? Index = 0 для первого iframe.html? Index = 1 для второго и т. Д., Но это нереальное решение для меня потому что в iframe будет много переходов на разные страницы, поэтому передача на все страницы индекса невозможна.

Answer 1

Do:

var iframe_parent_div = window.frameElement ? window.frameElement.parentNode : null;

Answer 2

Вы можете написать функцию в родительском документе, которая принимает имя iframe в качестве параметра, а затем получить div iframe-holder оттуда. Что-то вроде этого должно быть достаточно:

Код в родительском документе

var findIframeHolder = function (name) {
    var $frame = $('iframe[name="' + name + '"]');
    var $frameParent = $frame.parent();
};

Код в IFrame для вызова родительской функции

parent.findIframeHolder(window.name);