Question

我正在尝试设置一个图片，当点击该图片时，会打开逐渐变大的iframe，然后关闭onmouseout。以下是我到目前为止的情况：

<html>  
<head>
<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("onclick","grow()")
ifrm.setAttribute("id","amazingIFrame")
ifrm.style.display = "block";
ifrm.style.width = 640+"px";
ifrm.style.height = 400+"px";
ifrm.style.marginLeft = "325";
ifrm.style.marginTop = "125";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
}
function closeFrame(){
ifrm.style.display = "none";
}
function grow() {
    ifrm = document.getElementById('amazingIFrame');
    if (ifrm.style.width < 500) {
        ifrm.style.width += 10;
    } else {
        clearInterval(interval);  // stop growing when it's big enough
    }
}
function startGrow() {
    interval = setInterval("grow()", 10);  // repeat every 10 ms
}
</script>

</head>
<body>
<img src="" onclick="makeFrame()" "height="100px" width="100px" />

</body>
</html>

但这不起作用。有任何想法吗？

Answer 1

如果您点击iframe，则只会触发您正在连接的点击事件。给它一个宽边框，点击边框，你会发现它的工作原理。在ifrm = document.getElementById('amazingIFrame');之后发出提醒，你会看到。

如果你想在iframe中单击时触发click事件，你必须在那里放一些HTML并将事件连接到iframe本身的DOM。

Answer 2

有几个问题。

你永远不会打电话给startGrow()。
创建iframe时，iframe的大小已超过500像素
ifrm.style.width＆lt; 500不对。 ifrm.style.width将包含px，因此您将比较10px和500 ...
setInterval语法不正确。应该是setInterval（grow，10）;
身高有双引号
你没有传递任何参数，所以src将为null（实际上只是不必要）。

尝试this

function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("onclick","grow()")
ifrm.setAttribute("id","amazingIFrame")
ifrm.style.display = "block";
ifrm.style.width = 0;
ifrm.style.height = 400+"px";
ifrm.style.marginLeft = "325";
ifrm.style.marginTop = "125";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
startGrow();
}
function closeFrame(){
ifrm.style.display = "none";
}
function grow() {
    ifrm = document.getElementById('amazingIFrame');
    var width = parseInt(ifrm.style.width.replace("px",""));
    if (width < 500) {
        ifrm.style.width = (width + 10) +"px";
    } else {
        clearInterval(interval);  // stop growing when it's big enough
    }
}
function startGrow() {
    interval = setInterval(grow, 10);  // repeat every 10 ms
}

iframe增长到指定大小

2 个答案: