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:

Code:

        $('#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:

Code:

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.

HTML:

<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:

<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:

HTML:

[...]

<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>

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]

Element im iFrame abfragen

MsWord

Mitglied

SpiceLab

ZENmechanic

MsWord

Mitglied

SpiceLab

ZENmechanic

MsWord

Mitglied

SpiceLab

ZENmechanic

SpiceLab

ZENmechanic

Anhänge

MsWord

Mitglied

MsWord

Mitglied

SpiceLab

ZENmechanic

Neue Beiträge