IFrame Resizing

I know that we can resize the IFrame based on the height of the Content.
Now the problem I have is that I am using a URL iView and want the height of the IFrame to be auto adjusted based on the content shown in the IFrame.
To achieve this I need to call a Javascript function to resize the IFrame, but I don't know how to get handle of the current IFrame. This IFrame is generated by the Portal Framework and there is no ID/Name attached to it.
So is there a way to get the handle of the IFrame from within the content. For e.g. can the content get access to the IFrame in which it is being shown.
Thanks in Advance.
Ankur

Ankur
You can get the portal to resize the content automatically using the propertys of the iview/page and setting the page height to automatic. However, this will only work if the domain of the website that you are accessing is the same domain as the portal, i.e. if your portal is myportal.mydomain.com then the domain of the portal is mydomain.com. If the website is then mywebsite.internaldomain.com, then, unless the websites domain (by default) is mysebsite.internaldomain.com. Even if the website relaxed its domain to internaldomain.com the automatic resizing would not work. This is a security feature of browsers and can not be coded around. There are threads regarding the 'Access Denied' messages when trying to perform cross-domain scripting
I hope this helps
D

Similar Messages

Div or iFrame resize depending on content.

Can you hide a div unless you make it visible when being
clicked? How?
I have tried to use an iFrame for this, but cannot make it
right. I cannot make the div being resized depending on the content
of the page being targeted. That is why I have thought about maybe
using divs in stead.
I hope someone understand what I mean! Can anyone help?
/ Lena

I have tested several iframe resize techniques and the link
to the following
works best for me.
IFRAME SSI - II
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
The instructions are pretty straightforward.
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com

Dynamically Resizing Webdynpro iFrame

Hello,
I have an iFrame that is pointing to a KM Dumont. This KM document changes often. The source of the iframe is set to a context attribute. This context attribute is set to a string variable. The string variable contains the url to the KM document. How can I have the iframe resize to display the entire content of the KM document? I read some blogs and numerous forum post and can not retrieve a solution. Here are a couple of the places I visited to find the answers and was unsuccessful.
Escaping the Procrustean bed
Resize IFrame
Regards,
Francis
Edited by: Francis Cung on Oct 7, 2008 5:39 PM
Edited by: Francis Cung on Oct 8, 2008 9:38 PM
Edited by: Francis Cung on Oct 8, 2008 9:39 PM
Edited by: Francis Cung on Oct 8, 2008 9:40 PM

I change the two lines below:
1. This: textField.text = val        to this: textField.htmlText = val;
2. This: return textField.text;     to this: return textField.htmlText;
Here we go:
import flash.events.Event;
import flash.text.StyleSheet;
import mx.controls.TextArea;
public class DynamicTextArea extends TextArea
   public function DynamicTextArea(){
      super();
      super.horizontalScrollPolicy = "off";
      super.verticalScrollPolicy = "off";
      this.addEventListener(Event.CHANGE, adjustHeightHandler);
    private function adjustHeightHandler(event:Event):void{
      //trace("textField.getLineMetrics(0).height: " + textField.getLineMetrics(0).height);
      if(height <= textField.textHeight + textField.getLineMetrics(0).height){
        height = textField.textHeight;
        validateNow();
    override public function set htmlText(val:String):void{
      textField.htmlText = val;
      validateNow();
      height = textField.textHeight;
      validateNow();
    override public function set height(value:Number):void{
      if(textField == null){
        if(height <= value){
          super.height = value;
      }else{
        var currentHeight:uint = textField.textHeight + textField.getLineMetrics(0).height;
        if (currentHeight<= super.maxHeight){
          if(textField.textHeight != textField.getLineMetrics(0).height){
            super.height = currentHeight;
        }else{
            super.height = super.maxHeight;
    override public function get htmlText():String{
        return textField.htmlText;
    override public function set maxHeight(value:Number):void{
      super.maxHeight = value;

Iframes and automatic resizing to fit content displayed.

Hi
Is it possible to display an iframe on your page with content inside that resizes and then have the iframe resize with it so you dont have to use scroll bars or make the page size really big.?

If the iframe page is hosted on your domain, yes, there is a jQuery plugin for this.
http://github.com/house9/jquery-iframe-auto-height
If the iframe page is hosted externally, it won't work.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Javascrip for height adjustment in iframe

I have an iframe that needs it's height to adjust with the content. Can anyone help? here's the link to the page:
http://www.hermancg.com/html/HermanCG-Plan-Room.html
This is the iframe code within a div for that same page:
    
    <div id="contentArea">
      <div id="contentAreaInteriorLeftiFrame"><img src="../images/Internal-Images-plan-room.jpg" width="150" height="150" /></div>
      <div id="contentAreaInteriorRightiFrame">
        <p class="mainHead">Current Projects Bidding        </p>
        <div id="interiorIframeAreaPlanRoom">
          <iframe src="https://secure.smartbidnet.com/External/PublicBidProjects.aspx?Id=69vvPprMzBuPTg" width="650" height="1300" style="border: solid 0px black;" allowtransparency="true" frameborder="0" scrolling="auto"></iframe>
      </div>
For now I've just given it enough height to allow for the current content to fit, but the client will continue to add to or delete from that content. I've tried a few different javascripts I found on the internet, but had absolutely no luck making any of them work. I'm a designer, so I'm not fluent in code.
Thanks!
PBSOakley

It doesn't take much to get this working.
#1 Download the iframe resize script from GitHub and save it to the Scripts folder in your Local Site.
# 2 You need to link your page to the latest jQuery library as well as the resizeIframe.js script which you just downloaded from GitHub.
#3 Insert the following between the <head> and </head> tags in your HTML document (note path to Scripts folder).
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/ResizeIframe.js"></script>
#4 Add your iframe code after the <body> tag.
<body>
<iframe id="FRAME1" name="FRAME1" src="your-page.html" scrolling="no" frameborder="0" allowtransparency="true" width="100%" />
</iframe>
your other page content goes here.....

<script type="text/javascript">
jQuery('iframe').iframeAutoHeight();
</script>
That's all there is to it.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Can an i-frame resize the page height and itself with new content?

I built a website in Adobe Muse and embedded a blog within an i-frame on the portfolio page of the site here...
http://dannyhardakervideo.co.uk
This approach was taken because the client needed the ability to keep adding videos to the portfolio section of the site themselves indefinitely and
i was short on ideas to implement that functionality with Muse. I've now exported the code as HTML to Dreamweaver to see what I can achieve there.
Using Dreamweaver, Is it possible for the page height and i-frame height to resize with new content as more videos are added to it? Is there some script I can add to the page?
Is there a better solution?
PLEASE HELP.

Ordinarily, Iframe re-size scripts will only work when the parent page (with iframe) and the external page (blog) both reside on the same domain. However, someone came up with a cross domain solution which requires you to put jQuery scripts on both sites. NOTE: I've never tested this.
https://github.com/davidjbradshaw/iframe-resizer
IMO, a cleaner solution is to use scripts to parse the blog's RSS feed into the main site. You can use PHP code from FeedForAll or jQuery's jFeed plugin.
http://alt-web.blogspot.com/2011/06/adding-blogger-rss-feed-to-html-page.html
https://github.com/jfhovinne/jFeed
The main advantage in using a script to parse feeds is you control the appearance -- to match your main site & how many posts are displayed on the page.
Nancy O.

Prealod iFrame - Loading image

Hi,
I have implemented a jQuery Modal Dialog with an iFrame page inside and I was thinking to add a "loading" functionality to this dialog using GIF image.
My iFrame is implemented the way it is described here: {message:id=9426960} and I know that I can do this "loading thing" directly in my iFrame page this way:
[http://ayasenchuk.blogspot.com/2010/02/apex-page-with-animated-loading-modal.html]
But I want it do right in my dialog script, like it is done here:
http://plugins.jquery.com/content/jquery-ui-frame-dialog-loading-pane
or here:
http://www.blog.highub.com/javascript/javascript-library/preload-iframe-using-javascript/
or even here:
http://stackoverflow.com/questions/2939314/use-jquery-with-and-iframe-progress-indicator
Is that possible, does anyone has experienced this?
Thanks

Hi Vee,
Thank you for ypur reply and posted ideas to resolve my issue.
I really like the last option (the Plug-in) and actually before posting this thread I did contact Dna (developer of this Plug-In) to see how it is working.
So, I did try to put it into my app where it looks like this:
<link rel="stylesheet" href="http://tdanryan.com/demo/framedialog/assets/css/shpblack/jquery-ui-1.8.4.custom.css"
    type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-framedialog-1.1.2.js"></script>
<style type="text/css">
.loading-image { background: transparent url('http://tdanryan.com/demo/framedialog/assets/im/progress-indicator-alpha.gif')
no-repeat center center; }
</style>
<script type="text/javascript">
     var openNewInv = function(){
     var apexSession = $v('pInstance');
     var apexAppId = $v('pFlowId');
     var assetNumber = $v('P3_ID');
     var url = "http://son-orcl2:8080/apex/f?p="+apexAppId+":15:"+apexSession+"::NO:15:P15_ASSET_ID:"+assetNumber;
                jQuery.FrameDialog.create({
                    url: url,
                    loadingClass: 'loading-image',
                    title: 'Create Inventory Record',
                    width: 630,
                    height: 360,
                    autoOpen: false,
                    stack: true,
                    autoResize: true,
                    draggable: true,
                    buttons: {
                        "Cancel": function(){ $(this).dialog("close"); }
                    open: function(event, ui){
                        // to hide a button panel
                        $(".ui-dialog-buttonpane").hide();
                        // this disables resizing without the iframe resized to content size.
                        $(".ui-resizable-handle").hide();
                    close: function(event, ui){
            $(function(){
                openNewInv();
        </script>It just gave me the errors (see below, the same as from my workspace test)
I did try to implement this solution on apex.oracle.com so it will load yahoo.com (instead of my application page link) in my modal window as an iFrame and will show a loading image while preloading wthe iFrame web site. But id doesnt work. I did use FireBug to see what is happening and it gives me errors when page is loading:
elem.document.body is null
                elem.document.body[ "client" + name ] || docElemProp;                      jquery-1.5.2.js (line 8346)and
jQuery.FrameDialog.create is not a function
                close: function(event, ui){                                                                f?p=32...61::YES (line 49)and when I click on "Create" to open my modal popup it gives:
jQuery.FrameDialog.create is not a function
                close: function(event, ui){                                                               f?p=32...61::YES (line 48)Here is my workspace link and credentioal so u can see my script.
[http://apex.oracle.com/pls/apex/f?p=32646]
user: guest
psw: apex_demo
Thanks

I cannot find what is creating a space on my web page

I have a large space at the bottom of my home page that I cannot figure out where it is coming from. Would anyone be willing to look at my index.php to see why I have extra space between an image and the text below.
My website is www.jpalik.com
I have inserted the index.php
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photography By James Palik : Home Page</title>
<meta name="keywords" content="Photography, Germany, USA, European Union," />
<meta name="description" content="James Palik is an international travel photographer, event photographer, photo journalist, photographic artist, writer and teacher. This web site contains samples of his work." />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="Scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<link href="CSS/Layout.css" rel="stylesheet" type="text/css" media="all" />
<link href="CSS/TopMenu.css" rel="stylesheet" type="text/css" media="all" />

<?php require_once('Includes/DynamicBannerNarrow.html'); ?>
</head>
<body class="Home">
<div id="wrapper">
<div id="header">
<?php require_once('Includes/HeaderNarrow.html'); ?>
</div>
<p>

<?php
$directory = 'Menu/1-Home-index/BannerImages';
try {
// Styling for images
echo "<div id=\"myslides\">";
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
   $path = $directory . "/" . $item;
   echo "<img src=\"" . $path . "\" />";
echo "</div>";
catch(Exception $e) {
echo 'No images found for this rotating banner.<br />';
?>
<?php require_once('Includes/TopMenu.html'); ?>


<div id="content">

<?php $directory = 'Images/Content/Home';
try {
// Styling for images
echo "<div id=\"myslides2\">";
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
   $path = $directory . "/" . $item;
   echo "<img src=\"" . $path . "\" />";
echo "</div>";
catch(Exception $e) {
echo 'No images found for this rotating banner.<br />';
?>

<p>See my most recent <strong>PhotographicART</strong> postings:</a>
<ul>
<li><a href="San" _mce_href="http://www.jpalik.com/PhotographyByJamesPalik/Menu/2-PhotographicART/ColorColl ections/SanFranciscoCollection/ClassicColor/Level-4-Iframe.php">San">http://www.jpalik.com /PhotographyByJamesPalik/Menu/2-PhotographicART/ColorCollections/SanFranciscoCollection/Cl assicColor/Level-4-Iframe.php">San Francisco - Classic Views</li>
<li><a href="San" _mce_href="http://www.jpalik.com/PhotographyByJamesPalik/Menu/2-PhotographicART/ColorColl ections/SanFranciscoCollection/Expressionist/Level-4-Iframe.php">San">http://www.jpalik.co m/PhotographyByJamesPalik/Menu/2-PhotographicART/ColorCollections/SanFranciscoCollection/E xpressionist/Level-4-Iframe.php">San Francisco - Icons (expressionist)</li></a>
</p>

<p><strong>This site was last updated February 5, 2014</strong><br />
<br />
</p>

<p>Thank you for visiting</p>

<div id="footer">
<?php require_once('Includes/Footer.html'); ?>

</div>
</div>

<script type="text/javascript">
jQuery('iframe').iframeAutoHeight();
</script>
</body>
</html>
Thank you,
Jim

I am using Internet Explorer but I have also looked at it in Firefox.
The extra space is between the bottom or the images and the links to my internal pages. A singel space is what I would like. The page shows what look like four spaces.
Yes, the site framework was created by Nancy. She did a great job for me. I do my best to break it. Please note that all the commented out areas and possible HTML errors are my cuting and pasting, not Nancy's work. I am a cut and paste person, not a programmer .
I also dropped Nancy an email and told her I posted this in the forum.
Let me know if you do not see the space between the bottom of the pictures and the links.
Jim

Resize iFrame in Chrome

Another 'Go Figure' puzzle from Google Chrome.
This JavaScript re-sizes iFrame height to content & works perfectly for me on Win in IE6, 7, 8, FF, Opera and Safari but it doesn't work in Chrome.
JavaScript:

<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
HTML:
<iframe name="iFRAME1" id="iFRAME1" src="some-page.html"
scrolling="no" allowtransparency="true" width="100%"
frameborder="0" onload='javascript:resizeIframe(this);'>
</iframe>
Here's a Link: Click on OPACITY EXAMPLES to load a new page in the iFrame.
http://alt-web.com/Backgrounds.shtml
Anybody know of a quick fix exclusively for Chrome (not webkit)?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Nancy, this appears to be webkit despite your post. I tried your page on my MBP, Safari 5.0.3 ( 6533.19.4 ) and Chrome ( 8.0.552.231 ), both show the iframe at full length without resizing while Firefox 4 Beta 8 is showing the resizing. Only way it seemed to ignore it is if I clicked the link before the first frame completely loaded.
I did a quick search and came across this:
http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content (further links to http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html ).
What was interesting is that they are suggesting the inclusion of JQquery to get the the page load and resizing. One item to note is that their JQuery solution was only tested in webkit back in Safari 3.x (prior to Chrome?) so it is possible that with the updated JQuery library and webkit engine that it could work in those browsers now.

Spry iFrame Hack Problem - Resize Submenus

I'm trying to resize the submenus on the Spry Menu Bar
different sizes. It seems that when I make one submenu smaller than
the rest an iFrame sticks out of the side (with the width of the
rest of the submenus NOT the one I just resized). It of course
cannot be seen on FireFox but can be seen on IE. Any tips?

I see that you have fixed it.
Gramps

How can you stop slideshow from resizing the browser window iframe ?

Does anyone know where the code is that causes the iweb slideshow to resize the browser window when it is opened?
When it is placed on a page using <iframe src="http://homepage.mac.com/coreydee/slideshow/index.html" width="760" height="580" scrolling="no" style="border:none;" frameborder="0"></iframe> It resizes the browser window when it starts.

Does anyone know where the code is that causes the
iweb slideshow to resize the browser window when it
is opened?
When it is placed on a page using <iframe
src="http://homepage.mac.com/coreydee/slideshow/index.
html" width="760" height="580" scrolling="no"
style="border:none;" frameborder="0"></iframe> It
resizes the browser window when it starts.
The iWeb .Mac slideshow, which you previously tried to add in an iframe, does have a function to resize the window. But it would not cause the whole window to resize, just page within the iframe so you would never know.
However, the autoviewer one you are using should not do this.

Resize the captivate movie according to iframe dimensions.

Hello, I have captivate interactive movie embedded inside iframe. When I see only the output, it looks perfect and resizes according to dimensions of browser window. But, when i embedd the movie into iframe its dimensions seems distorted as shown below. How do I make if responsive according to size of iframe?

1. I will use (.fla) file source
2. Put behavior sound o script AS3
3. Refresh object in my Library Items
Also I try convert swf to video flv and custom skin control sound video.

Resize iFrame

I have an issue where I need to integrate BO reports (Crystal) into ALUI portal. I am using the Opendocument.jsp call to view the crystal report. I am having problem with the iFrame size, the report does not look good and I am looking for options to adjust the iframe size. Is there any way that we can adjust the size of the iFrame in the through SDK? Please let me know if there are any options available. Thanks for your help.

There are no options within any of our SDK's to adjust the size of your IFrame.

How do you embed a Bookeo widget in iWeb? Use iFrames?

I am trying to embed a Bookeo widget (Bookeo is a website that maintains bookings for business, such as tours) using iWeb.
1. First step, the instructions from Bookeo say to insert the following HTML code where you want the code to appear.
<script type="text/javascript" src="http://bookeo.com/widget.js?a=231MUKEPR13769HL64DC"></script>
I used the HTML Snippet but all I got was the spinning wheel.
2. Second step, Bookeo suggested that Bookeo widget is inside another iframe, and since iframes are not resizable I needed to reset the height attribute to 1500 px. Bookeo suggested the following code.
<iframe id="widget2-frame" src=".//Payment_files/widget2_markup.html" frameborder="0" style="width: 100%; height: 1500px;" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true"></frame></iframe>
I still got the spinning wheel, and even after I saved and published the above code it still didn't work. The published web pages comes up with an error message, and the iWeb page still has the spinning wheel
3. Third step, after a bit of Apple Communities searching I tired the following code.
<div style="width: 725px; height: 900px;">
<script type="text/javascript" src="http://bookeo.com/widget.js?a=231MUKEPR13769HL64DC"></script>
</div>
This 'worked' on the published webpage, but I still get spinning wheel on the iWeb page (even after I've saved and published the page.
My question is whether anybody knows a more elegant solution or is my third step the best way to proceed, even though I still get a spinning wheel on the iWeb page?
Thanks, Paul

Hi Wyodor,
Thanks for responding. I think that what your suggesting is that when you inserted the script it worked for you.
I just tried the demostration example you used of the massage bookings to see if I could get the same result as you.
I inserted the folowing code into the HTML Snippet in iWeb on new test page on my website
<script type="text/javascript" src="http://bookeo.com/widget.js?a=296X6L43U12C057243FB"></script>
I then published it, but on the published webpage I only go the very top right hand corner of the Bookeo form, whereas I can see that on your example http://home.wyodor.net/demoos/bookeo/BookeoiWeb.html all the Bookeo form is there.
Not sure why the difference between our two outcomes, but I'm only new to iWeb so maybe I've missed something. Could it be that I'm placing the HTML snippet to the right of a left hand column of information and that's causing only a portion of the widget/bookeo webpage to be visible?
Thanks
Paul

Opening a link from one iframe into another

Hello,
I have a web template in which there are three iframes. Each Iframe has a different web template embedded in it. I want to open a link present in one iframe into another.
Example:
iframe 1 (id: left) contains a link google dot com (or a link to a different web template)
when i click on the link, i want this page to open in iframe 2 (id: right)
Can anyone help me on how this can be done? I'm working in WAD7.0 and hence iframes.
Another question related to this is:
Can we create resizable iframes? In the older version of WAD, HTML was used and this was possible through framesets.
In NEW WAD 7.0, XHTML does not support framesets. So is there any other way to do it?
Regards,
Sameer

Either file is corrupt, theres' a corresponding .idlk file in the same folder, or it isn't really an indesign file.
How was the file transfered? What is the file extension?

IFrame Resizing

Similar Messages

Maybe you are looking for