Question

我使用的是简单的iframe代码;

<iframe src="http://caesium.x10.mx/test/index.html" allowtransparency="true" style="border:none" width="852" height="500"></iframe>

在http://caesium.x10.mx/test/index.html内部有一个工作按钮（右下角），但如果您尝试在iframed页面（http://caesium.x10.mx/test/index.php）上单击此按钮，则该按钮不起作用。

任何人都可以帮我找到解决方案吗？

谢谢！

用于按钮的代码。

<center><button onclick="ChangeSkin()">Change Skin</button></center>

<script>
function ChangeSkin() {
    location.href = 'https://www.minecraft.net/profile/skin/remote?url=https://crafatar.com/skins/' + document.getElementById('username').value + '.png';
    }
</script>

Answer 1

整个iframe是否可能在另一个透明层后面？

尝试设置css属性：

修改

位置：静态的; z-index：1000000; （或高于任何其他元素）

您可以在链接的.css文件中执行此操作，也可以在页面的head标记内执行此操作，如下所示：

<head> <style> #content{ Position:static; z-index: 1000000; } </style> </head>

当ui元素没有按预期运行时，我经常发现这是个问题。

Answer 2

您的透明页脚div与iFrame重叠。如果我为您的内容div提供正z-index（例如#content { z-index: 1; }），那么包含您的iFrame的div将在页脚顶部分层，并且所有按钮都会重新开始工作。

Answer 3

iframe很棒，但据我所知，整个Iframe只有一个按钮。

这是因为长期以来爆发的攻击。 Iframe基本上是一个实时更新的截图。

然而，我看到很多允许链接。

所以，我会先尝试其他答案。

Answer 4

我在 bootstrap 4 中通过将以下内容添加到我的自定义样式表中解决了这个问题：

iframe{
  z-index:9999;
}

这似乎可以解决问题

iframe中的按钮无效

4 个答案: