嵌入 iFrame 时，DIV 在 iPhone 上不可点击答案

【问题标题】：DIV not clickable on iPhone when embedded in iFrame嵌入 iFrame 时，DIV 在 iPhone 上不可点击
【发布时间】：2019-02-06 08:37:46
【问题描述】：

我用 HTML/JS/CSS 编写了一个简单的测验。到目前为止它工作正常，但是当我将它嵌入到我的网站的 iFrame 中时，按钮（div）在 iPhone 上是不可点击的。当我在没有 iFrame 的情况下查看测验时，一切正常。

那么，可能是 iFrame 的问题？

HTML/CSS 标记非常简单。

任何帮助表示赞赏 - hhanks 伙计们

body {
background: #80B6AE;
}
.button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    height: 50px;
    margin-top: 12px;
    transition: 0.3s;
    cursor: pointer;
    background-color: #FFF;
    color: #000;
}
.button:hover {
    background-color: #e0e0e0;
}

<!-- BUTTON A -->
<div class="button" onclick="tlPlay(1, '')">Lorem ipsum dolor sit amet</div>
                    
<!-- BUTTON B -->
<div class="button" onclick="tlPlay(1, 'correct')">Lorem ipsum dolor sit amet</div>

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

使用contents() 访问 iframe 内的 Document 对象。请注意，在一个文档中使用 jQuery 库来操作另一个文档通常会出现问题，通常应该避免使用它。但是，在绑定事件的情况下，它确实有效。

<iframe name="temp_iframe" width="100%" height="95%" src="'+the_url+'"></iframe>

$('[name=temp_iframe]').contents().find('button').click(function() {
    alert('click');
});

您也可以在link 上找到答案

【讨论】：