Element im iFrame abfragen
- Themenstarter MsWord
- Beginndatum
SpiceLab
ZENmechanic
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>SpiceLab
ZENmechanic
Doch doch, schließlich schreibst/sprichst Du im Plural.neneHabe die andere aus der Datei vendors.js entfernt und die anderen Versionen darüber eingefügt
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
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
ZENmechanic
Kann es jetzt nicht mit Sicherheit garantieren, ob Dir hier $(document).ready() aus dem Dilemma hilft?
Oder ist das schon bei Dir im Einsatz?
Ansonsten zur Erinnerung:
Oder ist das schon bei Dir im Einsatz?
Ansonsten zur Erinnerung:
SpiceLab
ZENmechanic
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
Ich habe jetzt mal folgendes ausprobiert:
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:
das ist das Template für eine E-Mail:
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">×</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">×</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ä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ö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ö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änge ([filescount])</span>
<br>
[attachments]
</div>
</div>SpiceLab
ZENmechanic
Wenn ich mein Script mit
Code:
$(document).ready(function(){
$('#mailContent').load(function(){
// ...
});
});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
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');
});
});
});
HTML:
<iframe style="display:none" src="content.htm" id="mailContent"></iframe>Im Original-Fiddle ist zudem sein src-Attribut leer, und wird erst durch einen Button-Klick befüllt.
[edit]Tipp-Ex[/edit]
Zuletzt bearbeitet:
