• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JQuery Bei Toggle von Artikel wird Iframe nicht angezeigt

nieselfriem

Mitglied
Hi!

Ich muss für eine Statusseite ein Iframe einbinden. Dies liegt in einem Artikel. Diesen will ich verbergen lassen und dann mit Button aufklappen. Leider wirdd dann das Iframe nicht angezeigt. Wenn ich allerdings das Togglen und das ide lasse, wird es angezeigt.

HTML:
<html>
    <head>
        <title>Umsysteme</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="js/jquery-2.1.4.min.js"></script>
        <script>
            $(document).ready(function () {
               /*Artikel sollen erst einmal nicht sichtbar sein*/
                $("#ref").hide(); 
                $("#prod").hide();
               
                $("#bt1").click(function () {
                      $("#ref").toggle(); 
                        
                });
               
                $("#bt2").click(function () {
                      $("#prod").toggle();  
                });
            });
        </script>
        <script language="javascript" type="text/javascript">
                function resizeIframe(obj) {
                obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
                obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
            }
        </script>
    </head>
    <body>
        <header>
            <h1>Seiten&uml;sicht</h1>
        </header>
        <main role="main">
            <button id="bt1">Button1</button> <button id="button2">Button2</button>
            <article id="ref">
                <h2>Testumgebung</h2>
                <iframe src="http://url1/" frameborder="0" scrolling="no" id="iframeref" onload='javascript:resizeIframe(this);'> </iframe>
            </article>
            <article id="prod">
                <h2>Produktionsumgebung</h2>
                <iframe src="http://url2/" frameborder="0" scrolling="no" id="iframeprod" onload='javascript:resizeIframe(this);'> </iframe>
            </article>
        </main>
        <footer>Infos</footer>
    </body>
</html>

Meine Frage ist, wieso wird das Iframe nach dem Togglen nicht angezeigt, obwohl es ja sichtbar sein müsste und die Quelle stimmt. Denn wenn ich die Seite statisch anzeige funktioniert es ohne Probleme. Was muss ich machen, damit es mit dem Togglen und dem Iframe funktioniert?

VG niesel
 
Werbung:
Dies hier:
HTML:
<iframe src="http://url2/"
sieht merkwürdig aus. Soll url2 vielleicht eine Variable sein? Dann ist sie erstens nicht definiert und zweitens wird sie nicht ausgewertet, weil sie in einem String steht.
 
onload='javascript:resizeIframe(this). Da diese beim Laden nicht sichtbar sind, sind sie total klein. jedoch habe ich es mal mit onshow versucht. Da wird das Frame zwar angezeigt aber noch nicht in der richtigen Größe.
 
Werbung:
Bei dem zweiten Button sehe ich ein Problem: Im jQuery hast Du $("#bt2") im HTML jedoch id="button2".
 
Und wirf mal einen Blick in die Fehlerkonsole:
Error: Permission denied to access property "document"
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
Offenbar ein Problem mit der SOP.
 
Zurück
Oben