Iframe mit JavaScript steuern

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

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

    Source Code

    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:

    Source Code

    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.

    Source Code

    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.

    Source Code

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


    == Code ==

    Source Code

    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>
    17. <p>
    18. <a href="site1.html" target="Fensterlein" onclick="return frameclick(this)"><b>seite 1</b></a>
    19. <a href="site2.html" target="Fensterlein" onclick="return frameclick(this)"><b>seite 2</b></a>
    20. </p>
    21. <iframe src="site1.html" name="Fensterlein">
    22. <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
    23. </iframe>
    24. </body>
    25. </html>
    Display All



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

    6,072 times viewed