Element im iFrame abfragen

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.
 
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.
Zum Vergrößern anklicken....
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:
HTML: 
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
 
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(…)
jquery-3.1.1.min.js:2 jQuery.Deferred exception: $.slidebars is not a function TypeError: $.slidebars is not a function
at HTMLDocument.<anonymous> (https://www.[...].de/assets/js/app.js:13:9)
at j (https://code.jquery.com/jquery-3.1.1.min.js:2:29948)
at k (https://code.jquery.com/jquery-3.1.1.min.js:2:30262) undefinedr.Deferred.exceptionHook @ jquery-3.1.1.min.js:2
jquery-3.1.1.min.js:2 Uncaught TypeError: $.slidebars is not a function(…)
Zum Vergrößern anklicken....
 
MsWord hat gesagt.:
nene :) Habe die andere aus der Datei vendors.js entfernt und die anderen Versionen darüber eingefügt :)
Zum Vergrößern anklicken....
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.
 
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
 
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
Zum Vergrößern anklicken....
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.
  1. http://stackoverflow.com/questions/24183029/pass-document-ready-of-iframe-to-parent-container
  2. http://stackoverflow.com/questions/12267010/how-can-i-detect-whether-an-iframe-is-loaded
  3. http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe
  4. http://stackoverflow.com/questions/164085/javascript-callback-when-iframe-is-finished-loading
 
Ich habe jetzt mal folgendes ausprobiert:
Code: 
        $('#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:
Code: 
//<![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:
HTML: 
                                <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>
 
MsWord hat gesagt.:
Ich habe jetzt mal folgendes ausprobiert:
Code: 
        $('#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.
Zum Vergrößern anklicken....
Wenn ich mein Script mit
Code: 
$(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 :cool:
Code: 
$(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:
HTML: 
<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]​
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück