Getting a Google Form in an IFrame with Auto Height

问题

So I have a form that I built with Google Docs because it seemed easier than going from scratch. I've gotten this to work by copy-pasting the code from google's page to one on my domain.

I managed to get it to auto-size its height with this lovely little script I found here: http://www.frontpagewebmaster.com/m-89000/tm.htm (this is not another thread about HOW to dynamically resize an iframe)

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

and the iframe on MY displayed page:

<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>

But now when I hit submit, the confirmation or error page opens in the _parent window (might be _top) - instead of in the iframe (_self, which is supposed to be the default?). target="" is depreciated and doesn't work. This also happens with ANY link inside the iframe. I've tried a couple different resize scripts, but I don't know enough to figure it out? Or the code doesn't actually work for my purposes? I'm not sure... Here's what I have working: http://fiendconsulting.com/60minutedesign/form-embed.html

What I need: Something that resizes the iframe content on first load of the Parent page and which opens all links in their _self frame/page/whatever.
What I don't care about: Resizing the iframe to fit the content of subsequent pages. If I click a link inside the iframe, I don't need the iframe to resize to whatever page I just went to.

I'm a self-taught programmer and I have some interesting gaps in my knowledge. I also just started learning JS and PHP and am at the Read, Comment and Cannibalize stage. It's better to assume I don't know, and it would help me a LOT if you told me where to Put the code (which document and where in the document). :)

回答1:

I'm unsure of what you are trying to do because the links you provided do not seem to work; however, I believe your problem might be because of your resize function.

Your function:

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

You take the element 'contentDiv', you take the HTML of your 'iframe' and then you set the same to your content div. This results in your 'iframe' not existing any more.

For example:

let's say my content div had this:

<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>

My iframe has only 1 link: <a href="www.example.com">Example Link</a>

After your function, your contentDiv now looks like:

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

you have effectively removed your iframe and put the contents of the iframe (the link) into your main div. Now if you click on the element, it'll automatically open on the same page - i.e. the 'parent' but there is no parent anymore!

So going forward, you should not be replacing the content; instead you should be modifying the height/width of the iframe. Have a look at: Adjust width height of iframe to fit with content in it

来源：https://stackoverflow.com/questions/9819155/getting-a-google-form-in-an-iframe-with-auto-height