Iframe mit JavaScript steuern

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Iframe lassen sich mit JavaScript adressieren und ändern. Dieses Howto erklärt wie.
    == Erläuterung ==
    Damit der Aufruf mit aktiviertem und deaktiviertem JavaScript funktionieren kann formulieren wir erstmal einen normalen Link:

    Quellcode

    1. <a href="site1.html" target="Fensterlein"><b>seite 1</b></a>


    Dieser zeigt auf ein normales Iframe. Der target des Links muss dabei mit dem Namen des Iframe übereinstimmen:

    Quellcode

    1. <iframe src="site1.html" name="Fensterlein"></iframe>


    Wir unterdrücken die Aktion nun indem wir ein return false einbauen. Keine Aktion passiert. Wir können jedoch mit JavaScript intervenieren und uns zum Beispiel das Ziel des Links ausgeben lassen.
    Mit this referenzieren wir das Linkelement und alle Daten stehen uns zur Verfügung.

    Quellcode

    1. <a href="site1.html" target="Fensterlein" onclick="alert(this.href);return false"><b>seite 1</b></a>


    In unserer Funktion frameclick können wir nun also mit ref.target und ref.href auf die beiden benötigten Attribute zugreifen und das Ziel verändern.

    Quellcode

    1. function frameclick(ref) {
    2. var frameref = eval("parent."+ref.target);
    3. frameref.location.href = ref.href;
    4. return false;
    5. }


    == Code ==

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    6. <title>Iframe mit JavaScript steuern</title>
    7. <script type="text/javascript">
    8. function frameclick(ref) {
    9. var frameref = eval("parent."+ref.target);
    10. frameref.location.href = ref.href;
    11. return false;
    12. }
    13. </script>
    14. </head>
    15. <body>
    16. <h1>Iframe mit JavaScript steuern</h1>
    18. <p>
    19. <a href="site1.html" target="Fensterlein" onclick="return frameclick(this)"><b>seite 1</b></a>
    20. <a href="site2.html" target="Fensterlein" onclick="return frameclick(this)"><b>seite 2</b></a>
    21. </p>
    23. <iframe src="site1.html" name="Fensterlein">
    24. <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
    25. </iframe>
    27. </body>
    28. </html>
    Alles anzeigen



    == Demo ==
    demo.easy-coding.de/javascript/iframe-control/

    11.172 mal gelesen