Question

我将以联系人形式发送php文件，而无需通过iFrame刷新页面。当我添加<iframe name="frame"></iframe>时，我会在页面底部看到this。如何删除？

如果我移除<iframe name="frame"></iframe>，则白框消失。

页面底部：

<iframe name="frame"></iframe>

在表单标签中：

<form target="frame" class="contact-form" method="post" name="ContactForm" onsubmit="return SetText();" action="contact.php">```

Answer 1

请勿删除iframe- 隐藏iframe 。将iframe封装在块级元素（例如<div>或任何 non-void 元素中，并用display:block（void元素没有结束标签ex。</div> ））。然后应用以下样式：

 position: relative;
 display: block; // if not already
 overflow: hidden;
 width: 1px;
 height: 1px;
 opacity: 0;
 overflow: hidden

接下来，将以下样式应用于iframe：

 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 max-height: 100%;
 max-width: 100%;
 overflow: hidden

演示大纲

点击提交按钮。
点击切换iframe 按钮。
应该在iframe中确认提交成功。

带有注释[OPTIONAL]的区域表示不需要的部分，仅包括用于演示的部分。

/* [OPTIONAL] All JavaScript */
const F = document.forms[0].elements;
F.toggle.onclick = toggleMask;

function toggleMask(e) {
  F.mask.classList.toggle('x');
}

[name=mask] {
  position: relative;
  display: block;
  overflow: hidden;
  /* [OPTIONAL] width and height */
  width: 300px;
  height: 100px;
}

.x {
  width: 1px;
  height: 1px;
  opacity: 0;
}

iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden
}

<form action='https://www.hashemian.com/tools/form-post-tester.php' method='post' target='frame'>

  <input name='text' value='test'>
  <input type='submit'><br><br>


  <output name='mask' class='x'>
   <iframe src='https://example.com' name="frame"></iframe>
  </output>

  <!--[OPTIONAL] Toggle button-->
  <input id='toggle' type='button' value='Toggle Iframe'>

</form>

iFrame盒，如何删除？

1 个答案:

演示大纲