Getting a Google Form in an IFrame with Auto Height - javascript

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). :)

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: Example Link
After your function, your contentDiv now looks like:
<div class="right" id="contentDIV">
Example Link
</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

Related

How to detect parent scroll event out of iframe => get iframe-position-fixed-polyfill work

First a short introduction to understand my problem.
My company uses a restricted community system for the intranet, which does not allow the use of javascript in pages. You can only place code through an internal editor and javascript will be deleted automatically after saving. My workaround is to use the community page as parent page and load my content, located on a sharepoint, through an iframe. This is not elegant but works perfect, no problems and I am able to use javascript. I have asked our IT and got the permission for this.
What I want to do
I want to add a vertical menu bar, which stays in a fixed position on the left side. Solution one is to code this menu bar in each parent page using html and css. This works fine, but if I have changes on the menu I have to update the code in each parent page. This is time consuming and could be error prone.
More elegant would be to save the menu bar in a seperate file and load this file in each page. While the parent page could not use javascript I have to load it through the iframe page.
iframe call inside parent page:
<iframe src="https://sharepoint.abc.com/index.aspx"></iframe>
loading the menu through the iframe page "index.aspx":
<div id="includedMenuBar"></div>
<script src="demo/js/jquery-3.2.1.js"></script>
<script>
$(function(){
$("#includedMenuBar").load("menubar.aspx");
});
</script>
This works perfect, but now the used css position: fixed; and top: 100px; for the menu orientate at the iframe page index.aspx. If I now scroll the parent page the menu bar is fixed to the iframe page but scrolls, because the iframe pages moves throug the scrolling of the parent page.
To solve this I tried iframe-position-fixed-polyfill which works perfect but needs the same domain for parent and iframe page. But my parent page loads from the company intranet and my iframe page loads from a sharepoint. So I need a cross-domain-communication.
A solution could be a cross-domain-event-handler like PostEvent. But I could not place any javascript on the parent page.
Problem
How can I get the iframe-position-fixed-polyfill work even if I need a cross-domain-communication and can not place any javascript inside the parent page?
Maybe there is a simpler solution for a fixed menu bar loaded through the iframe page I do not see?
Thanks a lot for your help.
Best regards,
Michael
Oh my god. Keep it simple should be the device. My solution which works for me. Load the menubar through another iframe in the parent page. Make this iframe fixed through an enclosed div.
<div style="position: fixed; top: 385px">
<iframe src="menubar.html" style="border: currentColor; border-image: none; overflow: hidden;" width="110" height="300"></iframe>
</div>
No scipt language is necessary.

Resize Iframe Height as per content with in the Iframe

so far what i research seems not be help. I am not jquery sabbie but it seems that it's not working. There are links within the iframe and once you click on each link, it expands and give you the content for that link. well the iframe height does not move along with it. here is my code. Here is what is in the header.
<script type="text/javascript">$(document).ready(function () {$('iframe').iframeAutoHeight({debug: true});});</script>
body tag:
<iframe src="http://www.promero.com/defaultNewsTest.asp" class="auto-height"scrolling="no" frameborder="0"></iframe><script>$('iframe.auto-height').iframeAutoHeight({minHeight: 240});</script>
the site is http://promerostage.promero.com/
Take a look at the following article. I hope it will gonna resolve your issue as there is the solution in it, you seek for.
http://sonspring.com/journal/jquery-iframe-sizing

FancyBox displaying contents of a DIV as type iFrame

This works perfectly fine:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
});
</script>
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and have the page coded this way:
<body>
<div id="pg"></div>
<script type="text/javascript">
document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>test me now</body></html>";
</script>
</body>
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
TIA
UPDATE: 07/28/12
As #arttronics suggested, I put together a jsFiddle
To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
The jsFiddle shows:
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.
However, when the player is an iframe and the content comes from href, then the FancyBox container is empty. If the contents comes from the content attribute, FancyBox shows a 404 error.
Simply comment and uncomment the jsFiddle code to see what I mean.
Any ideas for how I can meet my objective are appreciated and will get an up vote!
TIA.
Update: 07/31/2012
This new jsFiddle example: Iframe report viewer works but not in FancyBox
As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.
See this working example: jsFiddle
This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).
Major Caveats
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an #media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). So something is strange.

Is it possible to place a loader image inside an iframe while its loading its content?

I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.

Iframe scroll due to the links inside it

I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains.
The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.
Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href="#" and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.
If you are dealing with the problem in Javascript simply use this code:
ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)
or
<script language="javascript">
function totop() {
scroll(0,0);
}
</script>
and in your html for iframe, add an onload attribute as below:
<iframe name="iframe" onload="totop()">
Got this 2nd solution from another forum, and changed to the 1st one to suit my requirement as I am creating the iframe element and setting its properties in javascript and not in html. It worked for chrome as well as IE. FF didn't have the problem in the first place.

Categories