Operowanie na załadowanych stronach wewnątrz głównej strony / iframe

Question

Witam,

Z góry przepraszam za brak ścisłości w pytaniu, aczkolwiek raczkuję w js i napotkałem problem (pewnie dlatego, że do końca nie wiem jak go opisać ;))

Chodzi o to, że mam sobie index.html, w którym jest tag iframe:

<div class="main-article">
    <iframe id="mainContent">
                    
    </iframe>               
</div>

Oraz zdefiniowane mam menu: 

<div class="left-menu">
                <ul>
                    <li><a href="#" onclick="loadPage('main')">Main</a></li>
                    <li><a href="#" onclick="loadPage('hire')">Hire</a></li>
                    <li><a href="#" onclick="loadPage('history')">History</a></li>
                    <li><a href="#" onclick="loadPage('announcement')">Announcement</a></li>
                    <button id="add">+</button>
                    <button id="remove">-</button>
                </ul>
            </div>

Obsługiwane przez skrypt w JS:

function loadPage(name)
{
    this.site = name;
    document.getElementById("mainContent").src = this.site + ".html";
}

Wszystko fajnie. Wszystko się wyświetla w odpowiednim iframe na stronie - git. Problem pojawia się gdy chciałbym się odwołać do np tagu, który jest w pliku, który został załadowany. Powiedzmy, że klikam w menu na history i ładuje się do iframe - history.html, który wygląda tak (dodam, że jest to CAŁY plik html, nie ma tam nic poza tym co tutaj się pokaże):

<div id="history-page" class="main-article">
    Here is HISTORY file
</div>

I, gdy chcę się odwołać do "history-page" poprzez: 

function colorDiv()
{
    alert("Test");
}

var test = document.getElementById("history-page");
test.onmouseover = colorDiv;

oraz wypisać chociaż alert no to niestety nie działa ;) Wiem zapewne, że jest to jakaś bzdeta, gdzie coś omijam ale niestety póki co zapytam się was o podpowiedź. Jeśli by się dało, chciałbym by używać js bez jquery bądź innych. Na to też przyjdzie czas. Powinienem jakoś przeładować skrypt by ten widział tag w iframe?

Comments

Skąd próbujesz dostać się do #history-page? Z wewnątrz iframe, czy z zewnątrz?

---

Jeśli dobrze rozumiem Twoje pytanie, to z zewnątrz. Po prostu mam zmienną, która przechowuje: 

document.getElementById("history-page");

Według mnie, by działało to co napisałem, powinienem jakoś przeładować skrypt by ten wiedział, że coś się na stronie zmieniło, ale nie jestem pewny czy dobrze kombinuję ;)

Dodam (o ile nie widać tego z kontekstu), że zawartość podmienia się bez przeładowania strony.

Answer 1

Jeśli chcesz się dostać do DOMu iframe'a (którego adres znajduje się w tej samej domenie) z zewnątrz, to możesz złapać go i odwołać się do property contentDocument. Jeśli iframe jest z innej domeny, to komunikować się możesz przez postMessage.