javascript 创建并关闭iframe

来源:互联网 发布:淘宝公司运营模式 编辑:程序博客网 时间:2024/06/05 09:06
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>

<title>Image Gallery</title>
<link  rev="Stylesheet" rel="Stylesheet" href="8.css" />
<script type="text/javascript" language="javascript">

    var testdiv;
    var adiv, d;
    var iframe;
    function openiframe() {
        var e = openiframe.caller.arguments[0] || window.event, obj = e.srcElement || e.target;
        testdiv = obj.parentNode;

        //testdiv  =event.srcElement.parentNode;

        if (!testdiv.getElementsByTagName("iframe")[0]) {

 


            var iframe = document.createElement("iframe");
            iframe.src = "http://www.baidu.com";                                    /* 新iframe 地址*/
            iframe.setAttribute("frameborder", "0", 0);
            iframe.scrolling = "no";
            iframe.style.height = "0px";
            testdiv.appendChild(iframe);

            opendiv();
        }
        else return false;
    }

    function opendiv() {
        iframe = testdiv.getElementsByTagName("iframe")[0];
        d = parseInt(iframe.style.height);
        if (d < 200) {
            d += 4; iframe.style.height = d + "px";
            setTimeout("opendiv()");
        }
        else d = d;
    }

    function closediv1() {
        var c = closediv1.caller.arguments[0] || window.event, obj = c.srcElement || c.target;
        adiv = obj.parentNode;
        closediv();
    }

    function closediv() {

        iframe = adiv.getElementsByTagName("iframe")[0];
        d = parseInt(iframe.style.height);
        if (d > 0) { d -= 10; iframe.style.height = d + "px"; setTimeout("closediv()"); }
        else adiv.removeChild(iframe);
    }

</script>
</head><body>
<div>

<div>
<a href="#" onclick="openiframe()">查看</a>
<a href="#" onclick="closediv1()">关闭</a>
</div>

<div>
<a href="#" onclick="openiframe()">查看</a>
<a href="#" onclick="closediv1()">关闭</a>
</div>

<div>
<a href="#" onclick="openiframe()">查看</a>
<a href="#" onclick="closediv1()">关闭</a>
</div>

<div>
<a href="#" onclick="openiframe()">查看</a>
<a href="#" onclick="closediv1()">关闭</a>
</div>

<div>
<a href="#" onclick="openiframe()">查看</a>
<a href="#" onclick="closediv1()">关闭</a>
</div>


</div>
</body>
</html>