Getting a Google form in an auto-height IFrame

Question

So, I have a form that I created with Google Docs because it seemed easier than from scratch. I got this to work by copying the code from the google page to a page in my domain.

I was able to adjust its size using this beautiful little script that I found here: http://www.frontpagewebmaster.com/m-89000/tm.htm (this is not another thread on HOW to dynamically resize the iframe)

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

and the iframe page displayed on MY:

 <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 click submit, the confirmation or error page opens in the _parent window (maybe _top) - instead of the iframe (_self, which should be the default?). target = "" depreciates and does not work. This also happens with ANY reference inside the iframe. I tried a couple of different resizing scenarios, but I don’t know enough to understand this? Or does the code really not work for my purposes? I'm not sure ... Here is what I work: http://fiendconsulting.com/60minutedesign/form-embed.html

What I need : something that resizes the contents of the iframe the first time the parent page is loaded and opens all the links in their own frame / page / independently.
What doesn't bother me : resizing the iframe to fit the contents of subsequent pages. If I click the link inside the iframe, I don’t need the iframe to resize to any page I just went to.

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

Answer 1

I'm not sure what you are trying to do, because the links you provided do not work; however, I believe your problem might be caused by 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 it to your div. This causes your iframe to no longer exist.

For instance:

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

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

you have effectively removed your iframe and put the iframe content (link) in your main div. Now, if you click on an item, it will automatically open on the same page - that is, the "parent", but there is no longer a parent!

So go on, you should not replace the contents; instead, you should change the height / width of the iframe. Look at: Adjust the width of the iframe so that it matches the content in it