Olá!
Estou com um serviço que o cliente deseja colocar formulário iFrame da microsoft num modal, porém as vezes o formulário fica como na imagem abaixo, forçando o usuário a atualizar a página
Alguém sabe como atualizar o iFrame assim que ele abre?
Já tentou isso?
document.getElementById('seuIFrame').contentDocument.location.reload()
Acabei de testar aqui, não funcionou. D:
Sei que iFrame é algo bem atrasado, acredito que esse bug ocorra pelo iFrame estar num Modal com display: none; daí quando abro ele não está “carregado”.
Não faço ideia de como burlar isso.
mostra o código pra eu testar aqui
Pega aqui Edit fiddle - JSFiddle - Code Playground
Espera a página carregar e tenta abrir, caso abra, vai numa guia anônima e tenta abrir. Certas vezes abre normal, outras não.
Engraçado, não consegui pegar o caso de não abrir… Usei a guia anônima no chrome e com outros navegadores tbm… (Firefox e Bravo).
Usei esse código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.topheader {
background-color: #fff;
width: 100%;
height: 36px;
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
top: 52px;
z-index: 1;
}
.modal_top-header {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content_top-header {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 710px;
border-radius: 20px;
}
/* The Close Button */
.close_top-header {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_top-header:hover,
.close_top-header:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="topheader">
<button id="myBtn">Request Info</button>
<!-- The Modal -->
<div id="myModal" class="modal_top-header">
<!-- Modal content -->
<div class="modal-content_top-header">
<span class="close_top-header">×</span>
<div id="iframe">
<iframe id="iframe5" width="640px" height="480px" src="https://forms.office.com/r/9E5uKHL0i1?embed=true"
frameborder="0" marginwidth="0" marginheight="0"
style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen
mozallowfullscreen msallowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script>
const modal = document.getElementById("myModal");
const btn = document.getElementById("myBtn");
const span = document.getElementsByClassName("close_top-header")[0];
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Mas de qualquer forma coloquei pra criar o iframe assim que clicar no botão. Vê se vai rolar pra vc o erro novamente:
btn.onclick = function () {
modal.style.display = "block";
createIFrame();
}
function createIFrame(){
const iframeDocument = document.getElementById('iframe');
iframeDocument.innerHTML = '';
const iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://forms.office.com/r/9E5uKHL0i1?embed=true');
iframe.setAttribute('width', '640px');
iframe.setAttribute('height', '480px');
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('marginWidth', '0');
iframe.setAttribute('marginHeight', '0');
iframe.setAttribute('style', 'border: none; max-width:100%; max-height:100vh');
iframe.setAttribute('allowFullScreen', 'true');
iframe.setAttribute('webkitallowfullscreen', 'true');
iframe.setAttribute('mozallowfullscreen', 'true');
iframe.setAttribute('msallowfullscreen', 'true');
iframeDocument.appendChild(iframe);
}
Não consegui implementar. Mas vou seguir tentando, obrigado aliás.
Qualquer coisa dou um UP aqui.
Segue o código modificado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.topheader {
background-color: #fff;
width: 100%;
height: 36px;
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
top: 52px;
z-index: 1;
}
.modal_top-header {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content_top-header {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 710px;
border-radius: 20px;
}
/* The Close Button */
.close_top-header {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_top-header:hover,
.close_top-header:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="topheader">
<button id="myBtn">Request Info</button>
<!-- The Modal -->
<div id="myModal" class="modal_top-header">
<!-- Modal content -->
<div class="modal-content_top-header">
<span class="close_top-header">×</span>
<div id="iframe">
</div>
</div>
</div>
</div>
<script>
const modal = document.getElementById("myModal");
const btn = document.getElementById("myBtn");
const span = document.getElementsByClassName("close_top-header")[0];
btn.onclick = function () {
modal.style.display = "block";
createIFrame();
}
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
}
function createIFrame(){
const iframeDocument = document.getElementById('iframe');
iframeDocument.innerHTML = '';
const iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://forms.office.com/r/9E5uKHL0i1?embed=true');
iframe.setAttribute('width', '640px');
iframe.setAttribute('height', '480px');
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('marginWidth', '0');
iframe.setAttribute('marginHeight', '0');
iframe.setAttribute('style', 'border: none; max-width:100%; max-height:100vh');
iframe.setAttribute('allowFullScreen', 'true');
iframe.setAttribute('webkitallowfullscreen', 'true');
iframe.setAttribute('mozallowfullscreen', 'true');
iframe.setAttribute('msallowfullscreen', 'true');
iframeDocument.appendChild(iframe);
}
</script>
</body>
</html>
Valeu Abner. Obrigadão!