Showing posts with label iFrame. Show all posts
Showing posts with label iFrame. Show all posts

IE Progress Bar Is Loading...

It would never have finished. Most likely it is caused by multiple iFrames within a page. It supposed oK, but IE never have fixed this bug. The problem is where you put some content in an iframe and the content finishes loading in the iframe but the ie status bar keeps loading.

* Create a blank.html file in the root web directory. This file need not contain anything.
* Create an invisible iframe in your page by setting frameborder="0" and style="height: 0; width: 0"
* After the Javascript code that loads the iframe, add the following line:
setTimeout("document.getElementById('ifrDummy').src = 'blank.html'", 100);

No more problems. This solution is provided by Rizal Almashoor. Please note, following solution sometimes does not work:

‹body onload="javascript:fixprogressbar()"›

where fixprogressbar was a javascript function

function fixprogressbar()
{
top.garbageframe.document.write("");
top.garbageframe.close();
return
}


http://www.rizalalmashoor.com/blog/ie-progress-bar-loading-forever-for-iframe/
http://www.pcreview.co.uk/forums/thread-2161806.php

Issues of Array in JavaScript

It is noticed the initialization of a variable when declared as an element of array in not allowed. For instance:

var arr = [1, 2, 3];
var num = arr[0];

Assigning value to variable num "num = arr[0]; " needs to be done separately.

Since JavaScript arrays are assigned by reference, when array to be passed across iFrame, an issue of speed was met, especially for Mozilla Firefox.

Scripts in iFrame page:

var newArray = parent.arr;

When calling newArray[0] immediate after above declaration, it often generates error of "newArray is not defined". HTML pages are actual independent programs (stateless), it is no wonder reference across programs facing such kind of problem. It is therefore suggested avoiding passing array across parent page with iFrame page. Alternatively, slice array into single dimensional variable will do.

The reason behind this issue is this syntax of passing value is also true for object reference passing through HTML pages. We know that the reference acts as pointer to point to original variable rather than make a copy, any using of the reference is indeed reference back to parent HTML's object. It does cause a complex process behind the scent.

For same reason, if one wants to turn array in JavaScript, the best approach is to turn it into a string first, then pass the string to php, then use explode() to turn it back to array in php.


http://www.webdeveloper.com/forum/archive/index.php/t-93920.html

iFrame Height Issue

Changing height of iFrame from JavaScript function becomes painful task in new versions of both IE and Firefox. However, if one uses iFrame, adjusting its height to fit its contents is essential. The problem is the height of content is unknown when dramatic feeding required. The “orthodox” method to accomplish this task is to open iFrame with any height first, then adjust it on onLoad event. Width is less painful because for those iFrame to fit complete screen width, width=“100%” can be defined when iFrame is defined.

Basic idea of this “orthodox” approach includes two steps, detect the correct height and resize to it.

Detecting methods include:
- document.documentElement.clientHeight
- contentWindow.document.body.scrollHeight

Resize method is:
- document.getElementById('myIframe').style.height = newHeight

Basically, this approach does not work. There are several problems around it, such as assignment to .style.height does not work in Firefox. More serious problem is contentWindow.document.body.scrollHeight will return permission denial error message if host page and iFrame content page are not in the same domain; more precisely, the scheme, hostname and port match.

Another approach is to find the correct height before opening the iFrame. It is hard to detect the height of page to be inside of iFrame. However, since iFrame can have its own scroll bar, it may not be necessary to detect content’s height. The best approach might be to find available screen height of user after your title head. Following methods have been tested in Firefox and IE:


It appears Internet Explorer does not response to any of detections.

Following is the codes to apply this approach:

Codes in head:

‹script type="text/javascript"›
var url = "http://www.google.com/" // URL for your iFrame.
var titleHeight = 240;
var frameHeight = Math.max((screen.availHeight ? (screen.availHeight-titleHeight) : (window.innerHeight ? (window.innerHeight-titleHeight) : document.body.clientHeight)), 768);
window.document.onload = function {document.getElementById('linkIframe').style.height = frameHeight};

‹/script›

Codes in body:

‹script type="text/javascript"›
document.write('‹iframe id="linkIframe" width="100%" height="' + frameHeight + '" src="' + url + '" name="content"›‹/iframe›');
‹/script›

Labels