Question

我想使用iframe中存在的按钮来关闭iframe。

我有这两个文件，index.html和contents.html：

的index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
  a {
    postion: relative;
    top: 100px;
    left: 100px;
  }
</style>
  </head>
  <body>
<iframe id="outerIframe" src="./contents.html" width="1000px" height="1000px"></iframe>
<div class="behind">
  <a href="http://www.google.com">Mark Behind</a>
</div>
</body>
</html>

contents.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style media="screen">
  .big-box {
    height: 500px;
    width: 500px;
    background-color: #666;
  }
</style>
</head>


 <body>
<div class="big-box">
  <button class="closer" type="button" name="button">Click to close</button>
</div>


<script type="text/javascript">
  var button = document.querySelector('.closer');
  button.addEventListener('click', function() {
    document.getElementById('outerIframe').style.display = "none";
  });
</script>
</body>
</html>

当我点击按钮时，我在控制台中收到一条错误消息，其中显示＆＃34;无法读取属性＆＃39;样式＆＃39;为null。我明白这意味着我尝试获取iframe并不成功。我如何获得这个按钮所在的iframe，以便我可以更改它的样式？

Answer 1

需要遍历父窗口。 iframe有自己的窗口

尝试

button.addEventListener('click', function() {
    window.parent.document.getElementById('outerIframe').style.display = "none";
});

的 DEMO

如何从iframe中访问iframe元素？

1 个答案: