javascript - 使 iframe/form 固定位置

Question

我的网站上有一个包含在 div 中的 iframe。

如果我在电话亭中只输入一个字符，它不会生效，因此会出现红色警告文本。

如果我随后单击电子邮件框并按 Tab 键两次，在第二个选项卡上，表单会向左移动，这样我就再也看不到问题文本了。

如何水平固定表单使其不向左移动？

IFrame 代码:

<div style="border: 0px solid #a1a1a1; width: 450px; border-radius: 25px; background: #83aeff; overflow: hidden;">&nbsp; &nbsp; &nbsp;<iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="490px" height="330px" frameborder="0" scrolling="no">
</iframe></div>

网址:http://content.workbooks.com/free-trial-workbooks-crm

Answer 1

发生这种情况是因为您选择的 iframe 宽度太小(我认为这是由于 Industry 选择框造成的)。只需同时增加 div 和 iframe 宽度，偏移就会消失。

<div style="border: 0px solid #a1a1a1; width:540px; border-radius: 25px; background: #83aeff; overflow: hidden;">&nbsp; &nbsp; &nbsp;<iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="500px" height="330px" frameborder="0" scrolling="no">
</iframe></div>

Fiddle

编辑

要动态调整 iframe 高度，可以使用这个 jquery library .将 iframeResizer.contentWindow.min.js 脚本上传到您的服务器并从 iframe 页面包含它:

<script type="text/javascript" src="iframeResizer.contentWindow.min.js"></script>

然后上传iframeResizer.min.js，从包含iframe的div页面中包含它，并调用适当的函数来调整大小内嵌框架:

<script type="text/javascript" src="iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize();</script>

这应该可以解决问题。有关详细信息，请参阅上面链接的 GitHub 页面。