javascript - 在具有自动高度的 IFrame 中获取 Google 表单

Question

所以我有一个用 Google Docs 构建的表单，因为它似乎比从头开始更容易。我通过将代码从 google 页面复制粘贴到我域中的页面来实现这一点。

我设法用我在这里找到的这个可爱的小脚本让它自动调整高度:http://www.frontpagewebmaster.com/m-89000/tm.htm (这不是关于如何动态调整 iframe 大小的另一个话题)

function changeContent() { 
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
} 

以及我显示页面上的 iframe:

<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>

但是现在，当我点击提交时，确认或错误页面会在 _parent 窗口(可能是 _top)中打开 - 而不是在 iframe(_self，这应该是默认设置？)中打开。 target=""已贬值且不起作用。 iframe 内的任何链接也会发生这种情况。我已经尝试了几种不同的调整大小脚本，但我对解决问题的了解还不够多？或者代码实际上并不适合我的目的？我不确定...这是我的工作:http://fiendconsulting.com/60minutedesign/form-embed.html

我需要的:在父页面首次加载时调整 iframe 内容大小并打开其 _self 框架/页面/任何内容中的所有链接的东西。
我不关心的事:调整 iframe 的大小以适应后续页面的内容。如果我单击 iframe 内的链接，则不需要 iframe 调整大小以适应我刚刚访问的任何页面。

我是一名自学成才的程序员，我的知识有一些有趣的差距。我也是刚开始学习 JS 和 PHP，处于阅读、评论和蚕食阶段。最好假设我不知道，如果你告诉我把代码放在哪里(哪个文件和文件中的什么地方)，它会对我有很大帮助。 :)

Answer 1

我不确定您要做什么，因为您提供的链接似乎不起作用；但是，我相信您的问题可能是因为您的调整大小功能。

你的功能:

function changeContent() { 
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}

您获取元素“contentDiv”，获取“iframe”的 HTML，然后将其设置为您的内容 div。这会导致您的“iframe”不再存在。

例如:

假设我的内容 div 有这个:

<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>

我的 iframe 只有 1 个链接:<a href="www.example.com">Example Link</a>

在你的函数之后，你的 contentDiv 现在看起来像:

<div class="right" id="contentDIV">
<a href="www.example.com">Example Link</a>
</div>

您已经有效地删除了您的 iframe 并将 iframe 的内容(链接)放入您的主 div 中。现在，如果您单击该元素，它将自动在同一页面上打开 - 即“父级”，但不再有父级了!

因此，您不应该替换内容；相反，您应该修改 iframe 的高度/宽度。看一下: Adjust width height of iframe to fit with content in it