如果内部有 iframe，则无法单击锚点答案

【问题标题】：Can't click on anchor if it has an iframe inside如果内部有 iframe，则无法单击锚点
【发布时间】：2015-10-05 16:25:30
【问题描述】：

所以基本上我有这个：

<a href="myurl">
    <iframe>...</iframe>
</a>

如果我尝试点击<a>，什么都不会发生。我还尝试将一个类添加到我的锚点并尝试通过 jquery 捕获事件但没有再次发生。

有什么解决办法吗？

【问题讨论】：

我认为你不能将 iframe 放在 <a> 标签内
你能不能把<a>标签覆盖在Iframe的顶部？
看看锚的高度。
@ Germano Plebani - 锚的高度是 100%，我用萤火虫检查过，它覆盖了 iframe 的内容

标签： javascript jquery html css iframe

【解决方案1】：

我发现了一个仅使用 html 来完成这项工作的 hack。所以我的例子是this:

<a href="http://www.example.com">
    <iframe style="width: 163px; height: 163px;" scrolling="no" src="http://www.example.com"></iframe>
</a>

我想到了this 解决方案：

<a href="http://www.example.com" style="position: relative; display: block; width: 163px; height: 163px;">
    <div style="position:absolute; width: 100%; height: 100%; top: 0; left: 0;"></div>
    <iframe style="width: 163px; height: 163px;" scrolling="no" src="http://www.example.com"></iframe>
</a>

【讨论】：

所以您的解决方案是继续使用无效的 HTML 并希望浏览器以您想要的方式处理它？不是一个好主意。
1.我不希望浏览器按照我想要的方式处理，我只知道它们会那样做。
2.有时客户强迫你做傻事，所以不管你喜欢不喜欢，即使没有意义，你也需要去做。考虑到这一点，我必须为这种情况找到解决方案。
3.很容易说“这不好”，而不是发布任何解决方案。所以你的回答有助于知道它不好，但它并没有帮助我解决问题，因为你没有发布任何工作示例。
“我只知道他们会那样做” 不，你不会。你知道你测试过的人会这样做。你不知道 Chrome 的下一个 dot 版本不会破坏它。依赖损坏的 HTML 是个坏主意。如果客户要求你做一些愚蠢的事情，你会温柔地引导他们做一些不愚蠢的事情。

【解决方案2】：

这是无效的 HTML。您应该使用一些 JavaScript 来复制所需的操作。很难在我的平板电脑上输入代码，但要创建一个点击操作，将您带到所需的 URL。

【讨论】：

【解决方案3】：

在 a 中包含 iframe 是无效的 HTML。如果您的文档无效，浏览器可以按照作者认为合适的方式呈现和处理它，包括不按照您的预期执行。

a's content model是透明的，但一定没有interactive content：

互动内容是专门用于用户互动的内容。

=> a audio（如果controls 属性存在）button embed iframe img（如果usemap 属性存在） input（如果type 属性不处于hidden 状态）keygenlabelobject（如果usemap 属性存在）select@987654342（如果@98765434@ controls 属性存在）

（我强调iframe）

而是将链接放在iframe 的内容中。

【讨论】：

我无法将链接放在 iframe 内容中，因为 iframe 因为我在很多地方都使用它，而在其他地方我不需要 iframe 中的锚点。
@paulalexandru：这很容易解决，例如使用框架中的 JavaScript 可以看到并根据需要显示/隐藏链接的查询字符串参数。归根结底，您无法通过将 iframe 放入 a 元素来完成您想做的事情，它根本行不通。
我用jquery试过了，还是不行，反正我找到了一个解决方案，同时只用html，你可以检查一下。

【解决方案4】：

如果您想为 iframe 使用锚点，为什么不这样做：

index.html：

<iframe src="iframe_page.html"></iframe>

iframe_page.html：

<html>
  <head>
    <title>Page</title>
  </head>
  <body>
    <a href="another_page.html">
    ...
    </a>
  </body>
</html>

【讨论】：