Question

我希望iframe出现但是图像要继续播放如果这有道理？我更喜欢在javasript中完成它

<html>  
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","http://www.google.com");
ifrm.style.display = "block";
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
document.body.appendChild(ifrm);
}

function closeFrame(){
ifrm.style.display = "none";
}
</script>
</head>
<body>
<img src="images/largepic.jpg" onmouseover=makeFrame() onmouseout=closeFrame() height="100px" width="100px" />
</body>
</html>

`

Answer 1

我建议：

function makeFrame(src) {
    ifrm = document.createElement("iframe");
    ifrm.setAttribute("src","http://www.google.com");
    ifrm.style.display = "block";
    ifrm.style.width = 640+"px";
    ifrm.style.height = 480+"px";
    document.body.replaceChild(ifrm, document.getElementsByTagName('img')[0]);
}

虽然我建议，在这种情况下，为img元素提供id或以其他方式唯一引用它，以便准确地知道您要使用哪个img元素除去。

相反，如果您只是想在插入iframe后隐藏图片：

function makeFrame(src) {
    ifrm = document.createElement("iframe");
    ifrm.setAttribute("src","http://www.google.com");
    ifrm.style.display = "block";
    ifrm.style.width = 640+"px";
    ifrm.style.height = 480+"px";
    document.body.insertBefore(ifrm, document.getElementsByTagName('img')[0]);
}

使用CSS：

iframe + img {
    display: none;
}

Answer 2

<击>

你也可以通过＆＃34;这个＆＃34;参数进入closeFrame函数调用，它将为您提供图像元素。然后，您可以在该元素上设置display: none：

<html>  
  <head>
    <script language="JavaScript" type="text/javascript">
    function makeFrame(image_element) { <!-- Take the image_element as a parameter -->
    image_element.style.display = "none"; <!-- Set image element to not display -->
    ifrm = document.createElement("IFRAME");
    ifrm.setAttribute("src","http://www.google.com");
    ifrm.style.display = "block";
    ifrm.style.width = 640+"px";
    ifrm.style.height = 480+"px";
    document.body.appendChild(ifrm);
    }

    function closeFrame(){
    ifrm.style.display = "none";
    }
    </script>
  </head>
  <body>
    <!-- Pass this into makeFrame where this is the image element -->
    <img src="images/largepic.jpg" onmouseover=makeFrame(this) onmouseout=closeFrame() height="100px" width="100px" />
  </body>
</html>

如Shmiddty所说，只要您将closeframe()设置为display: none，就会调用

<html>  
  <head>
    <script language="JavaScript" type="text/javascript">
    function makeFrame(image_element) { <!-- Take the image_element as a parameter. -->
    image_element.style.display = "none"; <!-- Set image element to not display. -->
    ifrm = document.createElement("IFRAME");
    ifrm.setAttribute("src","http://www.google.com");
    ifrm.style.display = "block";
    ifrm.style.width = 640+"px";
    ifrm.style.height = 480+"px";
    ifrm.onmouseout=closeFrame; <!-- Close the IFrame when the mouse moves out of it. -->
    document.body.appendChild(ifrm);
    }

    function closeFrame(){
      ifrm.style.display = "none";
      var image_element = document.getElementById("myImg"); <!-- Show the image that was hidden when showing the iframe. -->
      image_element.style.display = "inline";
    }
    </script>
  </head>
  <body>
    <!-- Pass this into makeFrame where this is the image element -->
    <img id="myImg" src="images/largepic.jpg" onmouseover=makeFrame(this) height="100px" width="100px" />
  </body>
</html>

。您可能希望在iframe本身而不是img元素上设置onmouseout事件。

<击>

根据OP的评论更新我的答案：

以下是将鼠标移出时关闭IFrame所需的代码。这也恢复了原始图像。

onmouseout

这可以通过将closeFrame事件绑定到IFrame来实现。这告诉浏览器在将鼠标移出IFrame时调用closeFrame函数。在{{1}}函数中，我们然后恢复之前隐藏的图像。

隐藏图像onmouseover

2 个答案: