Question

我有一个带有iframe的网页，在iframe中有一个画布，其中id =＆＃34; canvas＆＃34;，当我调用（来自iframe中的.js文件）fillRect时画布整个网页（iframe内外都变成灰色。如何防止这种情况发生？

这是我的javascript：

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 100, 100);

这是我在iframe中的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
  </head>
  <body class="canvas">
     <canvas id="canvas" width="600" height="400"></canvas>
     <script src="game.js"></script>
  </body>
</html>

这是css样式（iframe和使用iframe的网页都使用）：

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    overflow: scroll;
    padding: 0;
}
body
{
    background-color: #999999; /*This is the color the entire screen is turning*/
}
canvas
{
    height: 400px;
    overflow: hidden;
    width: 600px;
}
canvas>canvas
{
    height: 100%;
    width: 100%;
}

我也觉得iframe会影响它所在的网页很烦人，我使用iframe的主要原因是隔离与网页其余部分隔离的与之相关的javascript，看起来它确实如此不那么做。我如何解决这个错误，有什么方法可以隔离iframe，这样它就不会影响我网页的其余部分，无论是放入javascript还是至少影响它。

编辑：我还应该提一下，如果我删除ctx.fillRect（），一切都按预期工作，网页也不会变灰。

EDIT2：我还应该提一下，当我说变成灰色时，我的意思是在前景变为灰色并覆盖页面上的其他所有元素（我在包含iframe的主网页中有标签和各种其他内容），100 * 100px黑匣子屏幕上唯一的非灰色内容，每一段文字/标题/按钮等都被灰色覆盖。

EDIT3：https://s3-us-west-2.amazonaws.com/dannys-aws/public/High+Score+Master+1.zip是您要自己测试的页面。

Answer 1

问题是溢出：auto;向每个元素添加滚动条。

fillRect导致整个屏幕改变颜色

1 个答案: