# Element im iFrame abfragen



## MsWord (29. November 2016)

Hallo,

ich bastle einen Mailer womit man seine E-Mail abrufen kann.
Soweit so gut. Den Inhalt der E-Mail lasse ich in einem iFrame ausgeben damit bei HTML-Emails nicht mein Design ruiniert ist. Wenn in diesem Inhalt eine E-Mail ist, lasse ich schon via PHP die <a>-Tags drum machen und gebe dem Element dann die Klasse "email". Jetzt möchte ich gern via jQuery abfragen ob der Benutzer auf die E-Mail geklickt hat, wenn ja soll dann das Antwort-Fenster geöffnet werden.

Die E-Mail lade ich natürlich via jQuery, d.h. Links ist die Liste mit allen Mails und Rechts wird die Mail dann geöffnet. Also wird das iFrame jedes mal neu ins Dokument geladen wenn man auf eine E-Mail klickt. 

Folgenden Code habe ich probiert, funktioniert nur leider nicht:

```
$('#mailContent').load(function(e) {
            e.preventDefault();
            $(".email").click(function(){
                alert('juhu');
            });
            $('#mailContent').on("click", ".email", function(e){
                e.preventDefault();
                alert('test');
            });
        });
```

Hat jemand einen Vorschlag wie man das realisieren kann? 
VG und schon mal Danke!


----------



## SpiceLab (29. November 2016)

Lokal erfolgreich getestet:

```
var iframeMailContent = $('body', $('#mailContent')[0].contentWindow.document);
$(iframeMailContent).on('click', '.email', function(e) {
  e.preventDefault();
  alert('test');
});
```
Die jQuery-Bibliothek und das Script werden im Hauptdokument, das *<iframe>* enthält, am Ende vor *</body></html>* notiert.

Vielleicht ist für Dich ja auch das jQuery-Plugin https://github.com/vincepare/iframeTracker-jquery von Interesse?

[edit]Tipp-Ex[/edit]​


----------



## MsWord (1. Dezember 2016)

Wenn ich das bei mir einbaue, bekomme ich immer folgenden Fehler:

Cannot read property 'contentWindow' of undefined(…)


----------



## SpiceLab (2. Dezember 2016)

MsWord hat gesagt.:


> Wenn ich das bei mir einbaue, bekomme ich immer folgenden Fehler:
> 
> Cannot read property 'contentWindow' of undefined(…)


Weil sich Dein Script offensichtlich im *<head></head>*-Bereich befindet.

Ich hatte aber darauf hingewiesen, wo das Script im HTML-Code zu notieren ist:


SpiceLab hat gesagt.:


> Die jQuery-Bibliothek und das Script werden im Hauptdokument, das *<iframe>* enthält, am Ende vor *</body></html>* notiert.




```
<body>
  <iframe src="..." id="mailContent"></iframe>
  <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
  <script>
    var iframeMailContent = $('body', $('#mailContent')[0].contentWindow.document);
    $(iframeMailContent).on('click', '.email', function(e) {
      e.preventDefault();
      alert('test');
    });
  </script>
</body>
```


----------



## MsWord (2. Dezember 2016)

Habe ich aber, hier mein Auszug meiner Seite:

```
<html lang="en" class="sb-init"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   [...]
    <link rel="shortcut icon" href="assets/img/favicon.png">

    <meta name="description" content="">

    <!-- CSS -->
    <link href="assets/css/preload.css" rel="stylesheet">
    <link href="assets/css/vendors.css" rel="stylesheet">
    <link href="css/loginsystem.css" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
    <link href="assets/css/syntaxhighlighter/shCore.css" rel="stylesheet">
    <link href="assets/css/style-red2.css" rel="stylesheet" title="default">
    <link href="css/expand.css" rel="stylesheet" title="default">
   
    <!-- lightbox 2 -->
    <link rel="stylesheet" href="css/lightbox.min.css">
   
            <link rel="stylesheet" href="css/inbox.css">
   
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="assets/js/html5shiv.min.js"></script>
        <script src="assets/js/respond.min.js"></script>
    <![endif]-->
[...]
<meta name="chromesniffer" id="chromesniffer_meta" content="{&quot;jQuery&quot;:&quot;2.2.4&quot;}"><script type="text/javascript" src="chrome-extension://homgcnaoacgigpkkljjjekpignblkeae/detector.js"></script></head>

<!-- Preloader -->
<body style="overflow: visible;"><div style="position:fixed;top:0px;left:0px;width:0;height:0;" id="scrollzipPoint"></div><div id="preloader" style="display: none;">
    <div id="status" style="display: none;">&nbsp;</div>
</div>



<div class="sb-site-container">
<div class="boxed">

<header id="header-full-top" class="hidden-xs header-full">
[...]
</header> <!-- header-full -->
<nav class="navbar navbar-default navbar-header-full navbar-inverse yamm navbar-static-top" role="navigation" id="header">
[...]
</nav>


       <div class="container-full">
                <div class="row">
                    <div class="col-md-6 col-sm-12 col-lg-6" id="view-mail-wrapper">
                        <div class="panel">
                            <div class="panel-body" id="inboxContent">                                <header>
                                    <h3>Kleiner Test</h3>
                                    <p class="pull-right">01.12.2016 23:46</p>
                                </header>
                                <div class="row view-mail-header" id="openMailInbox" data-inbox="INBOX" data-mailid="44">
                                    <div class="col-md-8 ">
                                        Von: Mir <span class="wp12">&lt;[...]&gt;</span><br>
                                        An: Mich <span class="wp12">&lt;[...]&gt;</span>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="view-mail-reply pull-right">
                                            <button class="btn btn-sm btn-primary reply"><i class="fa fa-reply"></i> Antworten</button><!--
                                            <button class="btn  btn-sm btn-default print" title="Drucken"><i class="fa fa-print"></i></button>-->
                                            <button class="btn btn-default btn-sm delete" title="Löschen"><i class="fa fa-trash-o"></i></button>
                                        </div>
                                    </div>
                                </div>                               
                                <div class="panel view-mail-body">
                                    <div class="panel-body">
                                        <iframe src="./[...].php?p=inbox&amp;a=1&amp;inbox=INBOX&amp;c=mailbody&amp;id=44" class="view-mail-frame" id="mailContent"></iframe>
                                    </div>
                                    <div class="panel-footer">
                                        <span class="attachments">Anhänge (0, 0 Byte)</span>
                                        <br>
                                       
                                    </div>
                                </div></div>
                        </div>
                    </div>
                   
        </div><!-- /.row -->
    </div><!-- container -->
[...]

</div> <!-- boxed -->
</div> <!-- sb-site -->

[...]

<script src="assets/js/vendors.js"></script>

<!-- Syntaxhighlighter -->
<script src="assets/js/syntaxhighlighter/shCore.js"></script>
<script src="assets/js/syntaxhighlighter/shBrushXml.js"></script>
<script src="assets/js/syntaxhighlighter/shBrushJScript.js"></script>

<script src="assets/js/DropdownHover.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/holder.js"></script>
<script src="assets/js/home_info.js"></script>

<!-- Hier ist dein Code mit drin -->
    <script src="js/ml.inbox.js"></script>

<!-- Lighbox 2 -->
<script src="js/lightbox.min.js"></script>





<div id="lightboxOverlay" class="lightboxOverlay" style="display: none;"></div><div id="lightbox" class="lightbox" style="display: none;"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="><div class="lb-nav"><a class="lb-prev" href=""></a><a class="lb-next" href=""></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div><script src="//s3.eu-central-1.amazonaws.com/forton/cbp/cmps/50_c211e.js"></script></body></html>
```

In den iFrame wird dann der Mail Inhalt angezeigt. Beim laden einer anderen E-Mail wird der komplette Inhalt von #inboxContent neu via jQuery/PHP geladen.


----------



## SpiceLab (2. Dezember 2016)

MsWord hat gesagt.:


> Habe ich aber, hier mein Auszug meiner Seite:
> 
> ```
> [...]
> ...


Und wo versteckt sich die erforderliche jQuery-Bibliotheksdatei, damit mein Script überhaupt laufen kann?


----------



## SpiceLab (2. Dezember 2016)

Um Dir "live" demonstrieren zu können, dass das grundsätzlich funktioniert, lade ich hier ein ZIP-Archiv mit den beiden Seiten hoch (*index.htm* enthält *<iframe>*, *content.htm* wird in *<iframe>* geladen).

Beachte hierbei, dass der URI zur offiziellen jQuery-Library kein *http:* / *https*: enthält, um mögliche gemischte Inhalte zu vermeiden, die vom Browser blockiert werden könnten, und daher das Demo auf Deinem Rechner nur auf dem lokalen Webserver funktionieren wird.


----------



## MsWord (2. Dezember 2016)

Vielen Dank für die Mühe. Dein Beispiel klappt, aber ich habe die jQuery mit unten eingebunden und dennoch kommt der Fehler. Kann das was mit zu tun haben, das er kein iFrame findet. Denn wenn man die Seite lädt, braucht es seine Zeit bis sich alle Listen aufgebaut haben. D.h. das iFrame wird erst ca nach 3 Sekunden geladen, da die Abfrage solange dauert.


----------



## MsWord (2. Dezember 2016)

zudem habe ich mal nachgeschaut. in der vendors.js ist die jQuery Version 2.2.4 mit drin. Sonst hätte ja auch eig. meine restlichen jQuery Scripte nicht funktioniert die die ganze Mail Verarbeitung bei mir machen


----------



## SpiceLab (2. Dezember 2016)

MsWord hat gesagt.:


> Vielen Dank für die Mühe. Dein Beispiel klappt, aber ich habe die jQuery mit unten eingebunden und dennoch kommt der Fehler. Kann das was mit zu tun haben, das er kein iFrame findet. Denn wenn man die Seite lädt, braucht es seine Zeit bis sich alle Listen aufgebaut haben. D.h. das iFrame wird erst ca nach 3 Sekunden geladen, da die Abfrage solange dauert.



Aus solchen Gründen werden JavaScripts am Dokumentende platziert, um sicherzustellen, dass die Seite komplett geladen ist, wenn die Scripts zur Ausführung kommen, und die Konsole keine Fehlermeldung à la "_x is undefined_" auswirft_._


MsWord hat gesagt.:


> zudem habe ich mal nachgeschaut. in der vendors.js ist die jQuery Version 2.2.4 mit drin. Sonst hätte ja auch eig. meine restlichen jQuery Scripte nicht funktioniert die die ganze Mail Verarbeitung bei mir machen


Ich würde Abstand davon nehmen, die jQuery-Library mit anderen Scripts in einer JS-Datei zusammenzuführen (= worst practice).

Also, zuerst die jQuery-Library gesondert aufrufen, danach die jQuery-Scripts, die wiederum in einer einzigen JS-Datei enthalten sein dürfen.

Wenn das Problem damit noch immer nicht behoben ist, wäre es hilfreich, die Seite hier zu verlinken, damit man eine Analyse betreiben kann.

[edit]Tipp-Ex[/edit]​


----------



## MsWord (2. Dezember 2016)

Ich habe jetzt mal die jQuery-Library vom rest getrennt und habe auch herausgefunden, das es nur bis v.2.2.4 läuft. Alle 3.x.x Versionen werfen ein Haufen Fehler aus.


----------



## SpiceLab (2. Dezember 2016)

MsWord hat gesagt.:


> Ich habe jetzt mal die jQuery-Library vom rest getrennt und habe auch herausgefunden, das es nur bis v.2.2.4 läuft. Alle 3.x.x Versionen werfen ein Haufen Fehler aus.


Mein Script läuft auch mit v2.2.4 

Nur, wenn Du mit v2.2.4 arbeitest, wie kann dann v3.x.x Fehler auswerfen?

Du wirst doch nicht den Fehler begangen haben, beide jQuery-Library-Versionen in der Seite einzubinden?

Im HTML-Dokument wird grundsätzlich nur einmalig eine Bibliothek eingebunden - also:

```
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
```


----------



## MsWord (2. Dezember 2016)

nene  Habe die andere aus der Datei vendors.js entfernt und die anderen Versionen darüber eingefügt  
Zum einen wird die Meldung ausgegeben das die jQuery Version für Bootstrap höher als 1.9.1 sein muss.
Hier mal alle Meldungen die dann kommen:


> Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3(…)
> app.js:20 Uncaught TypeError: $container.imagesLoaded is not a function(…)
> home_info.js:1 Uncaught ReferenceError: Circles is not defined(…)
> jquery-3.1.1.min.js:4 Uncaught TypeError: a.indexOf is not a function(…)
> ...


----------



## SpiceLab (2. Dezember 2016)

MsWord hat gesagt.:


> nene  Habe die andere aus der Datei vendors.js entfernt und *die anderen Versionen *darüber eingefügt


Doch doch, schließlich schreibst/sprichst  Du im Plural.

Meine verwendete jQuery-Library-Version kannst Du getrost aus dem Deinem Code entfernen.

Hätte ich von Beginn an gewußt, mit welcher Version Du arbeitest, hätte ich nicht die aktuelle für mein Demo gewählt.


----------



## MsWord (2. Dezember 2016)

Im plural geschrieben, ja ^^ die v.2.2.4 ist darüber eingefügt. Alles was zuvor ging, geht auch, nur bei deinem Teil kommt noch der Fehler (Cannot read property 'contentWindow' of undefined(…)).

Ich beschreibe mal was passiert:
1. Seite wird aufgerufen.
2. jQuery Library wird geladen
3. Der ganze andere gedöns für das Design
4. Dann wird mein Script ausgeführt:
4.1 Er ruft zuerst die Mailboxes via $.get ab (Posteingang,Gesendet, Papierkorb, etc.)
4.2 Ruft die Infos des aktuellen Postfachs ab (wie viel Mails etc.)
4.3 Ruft die letzten 25 Mails ab und gibt diese in die liste aus.
4.4 Ruft die oberste Mail auf. (Alles via get)
Bis die Mail geladen ist dauert also etwas


----------



## SpiceLab (2. Dezember 2016)

Kann es jetzt nicht mit Sicherheit garantieren, ob Dir hier *$(document).ready() *aus dem Dilemma hilft?

https://api.jquery.com/ready/

https://learn.jquery.com/using-jquery-core/document-ready/
Oder ist das schon bei Dir im Einsatz?

Ansonsten zur Erinnerung:


SpiceLab hat gesagt.:


> Wenn das Problem damit noch immer nicht behoben ist, wäre es hilfreich, die Seite hier zu verlinken, damit man eine Analyse betreiben kann.


----------



## MsWord (2. Dezember 2016)

Hi, das habe ich bereits im Einsatz. Die Seite möchte ich hier nicht verlinken, könnte dir aber eine PN schicken


----------



## SpiceLab (2. Dezember 2016)

MsWord hat gesagt.:


> Hi, das habe ich bereits im Einsatz. Die Seite möchte ich hier nicht verlinken, könnte dir aber eine PN schicken


PN erst zum Schluss, wenn wirklich alle Stricke gerissen sind 

Aufgabe wird es also sein, das Script erst anzustoßen, wenn der iFrame seinen Ladevorgang beendet hat.

http://stackoverflow.com/questions/24183029/pass-document-ready-of-iframe-to-parent-container

http://stackoverflow.com/questions/12267010/how-can-i-detect-whether-an-iframe-is-loaded
http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe
http://stackoverflow.com/questions/164085/javascript-callback-when-iframe-is-finished-loading


----------



## MsWord (2. Dezember 2016)

Ich habe jetzt mal folgendes ausprobiert:

```
$('#mailContent').on('load', function(e){
            e.preventDefault();
            alert('test');
        });
```

Aber auch hier bekomme ich kein alert angezeigt. Habe mich schon durch alle deine Links durch geklickt und rum probiert aber nichts hat funktioniert.

Hier ist mal die komplette inbox.js, ganz am Ende stehen die Sachen mit dem iframe:

```
//<![CDATA[
$(window).load(function(){
    $(document).ready(function() {   
       
        var max_entries_per_page = 25;
       
        function errormessage(msg, type, id){
            if(type == 'error'){
                $(id + ' .errormessages').empty().prepend('<div class="row"><div class="col-lg-12"><br><br><div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + msg + '</div></div></div><!-- /.row -->');
            } else {
                $(id + ' .errormessages').empty().prepend('<div class="row"><div class="col-lg-12"><br><br><div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + msg + '</div></div></div><!-- /.row -->');
            }
        }

        function inboxList(){
            var inbox     = $('#activeInbox').val();
            var page_span = $('#inbox-pages');
            var email = $("#emailAccount").val();
            var start    = page_span.data('page');
            $("#inboxlist tr").fadeOut(250, function(){ $(this).parent().empty().html('<center class="middleLoading"><i class="fa fa-3x fa-spinner fa-spin"></i><br>Lade E-Mails...</center>'); });
            $('.inboxlist-load').hide().fadeIn(100);
            $.get("run.js.php?p=inbox&a=" + email + "&inbox=" + inbox + "&c=list&start=" + start + "&max=" + max_entries_per_page).done(function(data) {
                $('.inboxlist-load').fadeOut(100);
                $("#inboxlist").empty().html(data);
                var msgno = $("#openMailInbox").data('mailid');
                $(".table-inbox tr.active").removeClass("active");
                $(".table-inbox #mail-" + msgno).addClass("active").removeClass("unread");
            });
        }

        function mailBoxes(){
            $("#mailboxes").html('<li id="inboxloader"><center class="middleLoading"><i class="fa fa-3x fa-spinner fa-spin"></i><br>Lade Postf&auml;cher...</center></li>');
            var email = $("#emailAccount").val();
            $.get("run.js.php?p=inbox&a=" + email + "&c=mailboxes").done(function(data) {
                $("#inboxloader").fadeOut(250, function(){ $(this).remove(); $("#mailboxes").html(data);});
            });
        }

        function inboxListInfos(){
            var inbox     = $('#activeInbox').val();
            $('#inbox-pages').data('start', 1);
            $('#inbox-pages').data('page', 1);
            var end = max_entries_per_page;
            var email = $("#emailAccount").val();
            $.get("run.js.php?p=inbox&a=" + email + "&c=infos&inbox=" + inbox).done(function(data) {
                var stri = data.split("|");
                var pages = Math.ceil(stri[2] / max_entries_per_page);
                if(stri[0] < max_entries_per_page)
                    end = stri[0];
                $('#inbox-pages').data('end', end);
                if(end <= 1)
                    $('#inbox-pages').data('start', '0');
                var start    = $('#inbox-pages').data('start');
                $("#inbox-pages").data('total', stri[0]);
                $("#inbox-pages").data('pages', pages);
                $("#inbox-pages").text(start + ' - ' + end + ' von ' + stri[0]);               
                $("#inbox-unread").text(stri[1]);   
                $("#inbox-name").text(stri[3]);   
                openFirstMail(stri[0]);       
            });
        }
       
        function refreshInboxListInfos(){
            var inbox     = $('#activeInbox').val();
            $('#inbox-pages').data('start', 1);
            $('#inbox-pages').data('page', 1);
            var email = $("#emailAccount").val();
            var end = max_entries_per_page;
            $.get("run.js.php?p=inbox&a=" + email + "&c=infos&inbox=" + inbox).done(function(data) {
                var stri = data.split("|");
                var pages = Math.ceil(stri[2] / max_entries_per_page);
                if(stri[0] < max_entries_per_page)
                    end = stri[0];
                $('#inbox-pages').data('end', end);
                if(end <= 1)
                    $('#inbox-pages').data('start', '0');
                $("#inbox-pages").data('total', stri[0]);
                $("#inbox-pages").data('pages', pages);
                var start    = $('#inbox-pages').data('start');
                $("#inbox-pages").text(start + ' - ' + end + ' von ' + stri[0]);               
                $("#inbox-unread").text(stri[1]);   
                $("#inbox-name").text(stri[3]);   
            });
        }
       
        $('.page-left').click(function(e){
            e.preventDefault();
            var inbox     = $('#activeInbox').val();
            var end     = $('#inbox-pages').data('end');
            var start    = $('#inbox-pages').data('start');
            var total     = $('#inbox-pages').data('total');
            var page    = $('#inbox-pages').data('page');
            var pages    = $('#inbox-pages').data('pages');
            if(page > 1){
                start -= max_entries_per_page;
                if(start < 1)
                    start = 1;
               
                end -= max_entries_per_page;
                if(end < max_entries_per_page)
                    end = max_entries_per_page;
               
                page--;
                $('#inbox-pages').data('page', page).data('start', start).data('end', end);
                $("#inbox-pages").text(start + ' - ' + end + ' von ' + total);
               
                inboxList();
            }
        });
       
        $('.page-right').click(function(e){
            e.preventDefault();
            var start    = $('#inbox-pages').data('start');
            var end     = $('#inbox-pages').data('end');
            var total     = $('#inbox-pages').data('total');
            var page    = $('#inbox-pages').data('page');
            var pages    = $('#inbox-pages').data('pages');
            if(page < pages){
                start += max_entries_per_page;               
                end += max_entries_per_page;
                if(end > total)
                    end = total;
               
                page++;
               
                $('#inbox-pages').data('page', page).data('start', start).data('end', end);
                $("#inbox-pages").text(start + ' - ' + end + ' von ' + total);
               
                inboxList();
            }
        });
       
        $('.refresh').click(function(){
            inboxList();
        });
       
        /* E-Mail Anzeigen */
        $('#inboxlist').on("click", ".message a", function(e){
            e.preventDefault();
            var inbox     = $('#activeInbox').val();
            var email = $("#emailAccount").val();
            var id = $(this).parent().parent().data('mailid');
            $(".table-inbox tr.active").removeClass("active");
            $(this).parent().parent().addClass("active").removeClass("unread");
            $("#inboxContent").empty().html('<center class="middleLoading"><i class="fa fa-3x fa-spinner fa-spin"></i><br>Lade E-Mail...</center>');
            $.get("run.js.php?p=inbox&a=" + email + "&inbox=" + inbox + "&c=mail&id=" + id).done(function(data) {
                $("#inboxContent").empty().html(data);
                unreadMails();
            });
        });
       
        $('#inboxContent').on("click", ".attachment-download", function(e){
            e.preventDefault();
            var inbox     = $('#openMailInbox').data('inbox');
            var id = $(this).data('id');
            var email = $("#emailAccount").val();
            var file = $(this).data('file');
            $.get("run.js.php?p=inbox&a=" + email + "&inbox=" + inbox + "&c=mail_attachment&id=" + id + "&f=" + file).done(function(data) {
                var stri = data.split("|");
                if(stri[0] == 'success'){
                    $("#download_attachment").attr("src", './index.php?download=' + stri[1]);
                } else {
                    alert(stri[1]);
                }
            });
        });
       
        $('#mailboxes').on("click", ".mailbox", function(e){
            e.preventDefault();   
            var inbox = $(this).data('id');
            var mailbox    = $('#activeInbox').val();
            if(inbox != mailbox){
                $("#mailboxes li.active").removeClass("active");
                $(this).parent().addClass("active");
                $('#activeInbox').val(inbox)
                inboxList();
                refreshInboxListInfos();
            }
        });
       
        function openFirstMail(total){
            var inbox     = $('#activeInbox').val();
            var id = $("#emailAccount").val();
            $("#inboxContent").empty().html('<center class="middleLoading"><i class="fa fa-3x fa-spinner fa-spin"></i><br>Lade E-Mail...</center>');
            $.get("run.js.php?p=inbox&inbox=" + inbox + "&a=" + id + "&c=mail&id=" + total).done(function(data) {
                $("#inboxContent").empty().html(data);
                $(".table-inbox tr:first").addClass("active").removeClass("unread");
            });
        }
       
        function openMail(id){
            var inbox     = $('#activeInbox').val();
            var account = $("#emailAccount").val();
            $("#inboxContent").empty().html('<center class="middleLoading"><i class="fa fa-3x fa-spinner fa-spin"></i><br>Lade E-Mail...</center>');
            $.get("run.js.php?p=inbox&inbox=" + inbox + "&a=" + account + "&c=mail&id=" + id).done(function(data) {
                $("#inboxContent").empty().html(data);
            });
        }
       
        $("#emailAccount").change(function(){
            var id = $(this).val();
            $('#activeInbox').val('INBOX');
            inboxListInfos();
            mailBoxes();
            inboxList();
            unreadMails();
        });
       
        function unreadMails(){
            var inbox     = $('#openMailInbox').data('inbox');
            var id = $("#emailAccount").val();
            $.get("run.js.php?p=inbox&inbox=" + inbox + "&a=" + id + "&c=unread").done(function(data) {
                $("#inbox-unread").text(data);
            });
        }
       
        $("#writeAmail").click(function(){
            var inbox     = $('#activeInbox').val();
            var email = $("#emailAccount").val();
            $(".table-inbox tr.active").removeClass("active");
            $("#inboxContent").empty().html('<center class="middleLoading"><i class="fa fa-3x fa-spinner fa-spin"></i><br>Lade...</center>');
            $.get("run.js.php?p=inbox&a=" + email + "&inbox=" + inbox + "&c=write").done(function(data) {
                $("#inboxContent").empty().html(data);
            });
        });

        $('#inboxContent').on("click", ".reply", function(e){
            e.preventDefault();
            var inbox     = $('#openMailInbox').data('inbox');
            var id = $('#openMailInbox').data('mailid');
            var email = $("#emailAccount").val();
            $("#inboxContent").empty().html('<center class="middleLoading"><i class="fa fa-3x fa-spinner fa-spin"></i><br>Lade...</center>');
            $.get("run.js.php?p=inbox&a=" + email + "&inbox=" + inbox + "&c=reply&id=" + id).done(function(data) {
                $("#inboxContent").empty().html(data);
                var email = $("#emailWrite input[name=to]").val();
                $("#inboxContent header h3").text("Antwort an: " + email);
            });
        });

        $('#inboxContent').on("click", ".delete", function(e){
            e.preventDefault();
            var inbox     = $('#activeInbox').val();
            var id = $('#openMailInbox').data('mailid');
            var email = $("#emailAccount").val();
            $("#inboxContent").empty().html('<center class="middleLoading"><i class="fa fa-3x fa-spinner fa-spin"></i><br>L&ouml;sche E-Mail...</center>');
            $.get("run.js.php?p=inbox&a=" + email + "&inbox=" + inbox + "&c=delete&id=" + id).done(function(data) {
                var stri = data.split("|");
                if(stri[0] == 'success'){
                    $(".table-inbox tr#mail-" + id).fadeOut(250, function(){ $(this).remove(); var newMail = $(".table-inbox tr:first").data('mailid'); $(".table-inbox tr:first").addClass("active"); openMail(newMail);});
                    var total = $("#inbox-pages").data('total');
                    total--;
                    $("#inbox-pages").data('total', total);
                    var start = $("#inbox-pages").data('start');
                    var end = $("#inbox-pages").data('end');
                    end--;
                    $("#inbox-pages").data('end', end);
                    $("#inbox-pages").text(start + ' - ' + end + ' von ' + total);               
                } else {
                    $("#emailError").html(stri[1]);
                    $("#errorModal").modal('show');
                    openMail(id);
                }
            });
        });
       
        $("#inboxContent").on("submit", "#emailWrite", function(e){
            e.preventDefault();
            var inbox = $('#activeInbox').val();
            var id = $('#openMailInbox').data('mailid');
            var email = $("#emailAccount").val();
            var to = $("#emailWrite input[name=to]").val();
            var cc = $("#emailWrite input[name=cc]").val();
            var su = $("#emailWrite input[name=subject]").val();
            var me = $("#emailWrite textarea[name=text]").val();
            var fr = $("#emailWrite input[name=from]").val();
            $.post("run.js.php?p=inbox&a=" + email + "&inbox=" + inbox + "&c=send&id=" + id, {to: to, cc: cc, subject: su, text: me, from: fr}).done(function(data) {
                var stri = data.split("|");
                if(stri[0] == 'success'){
                    $("#inboxContent").empty().html(stri[1]);
                } else {
                    $("#emailError").html(stri[1]);
                    $("#errorModal").modal('show');
                }
            });
        });
       
        $("#checkmailAll").change(function(){
            var val = $("#checkAllValues").data('value');   
            if(val == 'all'){
                if(!$("#checkmailAll").is(":checked"))
                    $(".table-inbox tr > td input[type=checkbox]").prop("checked", false);
                else
                    $(".table-inbox tr > td input[type=checkbox]").prop("checked", true);
            } else if(val == 'unread'){
                if(!$("#checkmailAll").is(":checked"))
                    $(".table-inbox tr.unread > td input[type=checkbox]").prop("checked", false);
                else
                    $(".table-inbox tr.unread > td input[type=checkbox]").prop("checked", true);
            } else if(val == 'read'){
                if(!$("#checkmailAll").is(":checked"))
                    $(".table-inbox tr:not(.unread) > td input[type=checkbox]").prop("checked", false);
                else
                    $(".table-inbox tr:not(.unread) > td input[type=checkbox]").prop("checked", true);
            } else if(val == 'important'){
                if(!$("#checkmailAll").is(":checked"))
                    $(".table-inbox tr.important > td input[type=checkbox]").prop("checked", false);
                else
                    $(".table-inbox tr.important > td input[type=checkbox]").prop("checked", true);
            } else if(val == 'unimportant'){
                if(!$("#checkmailAll").is(":checked"))
                    $(".table-inbox tr:not(.important) > td input[type=checkbox]").prop("checked", false);
                else
                    $(".table-inbox tr:not(.important) > td input[type=checkbox]").prop("checked", true);
            }
        });
       
        $("#checkAllValue li a").click(function(){
            var val = $(this).data('value');
            var text = $(this).text();
            text = text + " <span class=\"caret\"></span>"
            $("#checkAllValues").html(text);
            $("#checkAllValues").data('value', val);
        });
       
        $("#checkMailMethod li a").click(function(){
            var val = $(this).data('value');
            var checks = '';
            var inbox = $('#activeInbox').val();
            var email = $("#emailAccount").val();
            var num = 0;
            $("input[name^=checkmail]:checked").each(function(){
                checks = checks + ',' + $(this).val();
                num++;
            });
            if(num > 0){
                checks = checks.substr(1);
                $.get("run.js.php?p=inbox&a=" + email + "&inbox=" + inbox + "&c=flag_" + val + "&s=" + checks).done(function(data) {
                    var stri = data.split("|");
                    if(stri[0] == 'success'){
                        checks = checks.split(",");
                        for(var i = 0; i < checks.length; i++){
                            var elem = $(".table-inbox tr#mail-" + checks[i]);
                            if(val == 'read'){
                                elem.removeClass("unread");
                            } else if(val == 'unread'){
                                elem.addClass("unread");
                            } else if(val == 'important'){
                                elem.addClass("important");
                                elem.find("td i.fa-star-o").removeClass("fa-star-o").addClass("fa-star");
                            } else if(val == 'unimportant'){
                                elem.removeClass("important");
                                elem.find("td i.fa-star").addClass("fa-star-o").removeClass("fa-star");
                            }
                           
                            elem.find("input[name=checkmail]").prop("checked", false);
                        }
                    } else {
                        $("#emailError").html(stri[1]);
                        $("#errorModal").modal('show');
                    }
                });
            }
           
        });
   
        // Function run
        mailBoxes();
        inboxListInfos();
        inboxList();
       
        $('#mailContent').on('load', function(e){
            e.preventDefault();
            alert('test');
        });
            $('.email').on('click', function(){
                alert('mail');  
            });
        $('#mailContent').load(function(){
            $('#mailContent').on('click', '.email', function(e) {
              e.preventDefault();
              alert('test');
            });   
        });
       
    }); // END ALL
});
//]]>
```

das ist das Template für eine E-Mail:

```
<header>
                                    <h3>[subject]</h3>
                                    <p class="pull-right">[date]</p>
                                </header>
                                <div class="row view-mail-header" id="openMailInbox" data-inbox="[inbox]" data-mailid="[mailid]">
                                    <div class="col-md-8 ">
                                        Von: [from]<br>
                                        An: [to]
                                    </div>
                                    <div class="col-md-4">
                                        <div class="view-mail-reply pull-right">
                                            <button class="btn btn-sm btn-primary reply"><i class="fa fa-reply"></i> Antworten</button><!--
                                            <button class="btn  btn-sm btn-default print" title="Drucken"><i class="fa fa-print"></i></button>-->
                                            <button class="btn btn-default btn-sm delete" title="L&ouml;schen"><i class="fa fa-trash-o"></i></button>
                                        </div>
                                    </div>
                                </div>                               
                                <div class="panel view-mail-body">
                                    <div class="panel-body">
                                        <iframe src="[content]" class="view-mail-frame" id="mailContent"></iframe>
                                    </div>
                                    <div class="panel-footer">
                                        <span class="attachments">Anh&auml;nge ([filescount])</span>
                                        <br>
                                        [attachments]
                                    </div>
                                </div>
```


----------



## SpiceLab (2. Dezember 2016)

MsWord hat gesagt.:


> Ich habe jetzt mal folgendes ausprobiert:
> 
> ```
> $('#mailContent').on('load', function(e){
> ...


Wenn ich mein Script mit

```
$(document).ready(function(){
  $('#mailContent').load(function(){
    // ...
  });
});
```
erweitere, funktioniert es auch nicht mehr am Dokumentende (*</body>*), sondern in *<head></head>  :-]*

Die jQuery-Library gehört dann entsprechend dorthin mitgenommen.

Die erste Antwort http://stackoverflow.com/a/12267180 meines zweitgenannten Links  http://stackoverflow.com/questions/12267010/how-can-i-detect-whether-an-iframe-is-loaded enthält ja parallel zu den Codesnippets zwei jQuery-Fiddles.

In Anlehnung an http://jsfiddle.net/umYkV/ habe ich mein Script wie folgt ausgebaut, und erhalte beide alerts 

```
$(document).ready(function(){
  $('#mailContent').load(function(){
    $(this).show();
    alert('load the iframe');
    var iframeMailContent = $('body', $('#mailContent')[0].contentWindow.document);
    $(iframeMailContent).on('click', '.email', function(e) {
      e.preventDefault();
      alert('test');
    });
  });
});
```
Es gilt zu beachten, dass in diesem (Test)Fall der iFrame zunächst mit *display:none *versteckt wird:

```
<iframe style="display:none" src="content.htm" id="mailContent"></iframe>
```
und *$(this).show()* ihn sichtbar schaltet.

Im Original-Fiddle ist zudem sein *src*-Attribut leer, und wird erst durch einen Button-Klick befüllt.

[edit]Tipp-Ex[/edit]​


----------



## MsWord (2. Dezember 2016)

Funktioniert bei mir im Zusammenhang mit allem leider auch nicht... Ich habe dazu auch die Library und das Script welches du geschrieben hattest in den <head> Tags eingebaut. Zu Überprüfung ob es daran liegt das iframe via jquery geladen wird, habe ich auch mal fix in die Datei mit hinein geschrieben. Dann klappt es, wenn ich das iframe via jQuery hinein lade funktioniert es nicht mehr.


----------



## SpiceLab (2. Dezember 2016)

MsWord hat gesagt.:


> Ich habe jetzt mal folgendes ausprobiert:
> 
> ```
> $('#mailContent').on('load', function(e){
> ...


Funktioniert bei mir einwandfrei, sowohl im Dokumentheader, als auch weiterhin am -ende, blos ohne das *$(window).load(function(){ ... }); *

Was mich aber schon wundert, warum Du an Deinem zu Beginn des Themas gezeigten Code (insbesondere die Zeilen 11-16 im nachfolgenden Ausschnitt) festhälst, und mein Script darin überhaupt nicht auftaucht.

Ich habe immer nur als Antwort von Dir gelesen, dass mein Script bei Dir nicht funktioniert. Wie Du es aber konkret angewendet hast, blieb Dein Geheimnis.

Das hier

```
$(window).load(function(){
  $(document).ready(function() {
 
    $('#mailContent').on('load', function(e){
      e.preventDefault();
      alert('test');
    });
    $('.email').on('click', function(){
      alert('mail');
    });
    $('#mailContent').load(function(){
      $('#mailContent').on('click', '.email', function(e) {
        e.preventDefault();
        alert('test');
      });
    });
 
  });
});
```
läuft auch bei mir nicht. Dafür aber das:

```
//$(window).load(function(){
$(document).ready(function(){ 
 
  $('#mailContent').load(function(e) {
    e.preventDefault();
    alert('juhu');
    var iframeMailContent = $('body', $('#mailContent')[0].contentWindow.document);
    $(iframeMailContent).on('click', '.email', function(e) {
      e.preventDefault();
      alert('mail');
    });
  });
       
});
//});
```
... aber ausschließlich im Dokumentheader.

Für mich ist jetzt an dieser Stelle Wochenende angesagt.

[edit]Tipp-Ex[/edit]​


----------

