DIV not clickable on iPhone when embedded in iFrame

Question

I wrote a simple quiz in HTML/JS/CSS. It works fine so far, but when i embed it into an iFrame to my site, the buttons (divs) are not clickable on an iPhone. When I view the quiz without iFrame, everything works perfectly.

So, maybe it's an iFrame problem?

The HTML/CSS markup is pretty simple.

Any help is appreciated - hhanks guys

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>

score 0 · Answer 1 · answered Feb 06 '19 at 10:49

Use contents() to access the Document object inside an iframe. Note that there are in general problems with using a jQuery library in one document to manipulate another document and it should in general be avoided. However, in the case of binding events it does work.

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

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

you can find answer on this link also

DIV not clickable on iPhone when embedded in iFrame

1 Answers1