JavaScript - Write A Dynamic Iframe

Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies.
Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame
Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs.

Gentlemen,

I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars.
The function for resizing the iframe id="child" is already correctly implemented like so:

Code:

<script language="JavaScript">
<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('child').contentWindow.
      document.body.scrollHeight;
  //change the height of the iframe
  document.getElementById('child').height=
      the_height;
}
//-->
</script>

and the call
Code:

<iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child">

This what I have going on:

- index.html => contains some content and the iframe id="child"
- childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/"

Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid.

Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called.

In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required.

This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC.
All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com".

The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script.

As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated.
Thanks,

Hi All,
i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one..

i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after..

For what i need that :

i have my user inserting information on the level 1. let say Copagny info
2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level ..
and so on...

3- those sub level ( subforms ) can also call their respective subforms..



Any idea how to design this ?


thanks

Hi all,

I hope you can help

I have some code which:

1) Opens a URL (e.g. google.com) in a hidden iframe, then
2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded...

This works exactly as I need.

What I'd like to do is the following:

1) Open a URL (e.g. google.com) in a hidden iframe, then
2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe
3) The address bar of the full-screen iframe should be my domain (obviously!)

Here's what I have so far...

Hidden iframe -> New URL Code:

Code:

<html>
<body>
	<script type="text/javascript">

		var page_body = document.getElementsByTagName('body');
		var myframe = document.createElement('iframe');
		var id = Math.random();
		myframe.setAttribute('id', 'myFrame'+id);
		myframe.src = 'http://google.com';  //First open Google in hidden iframe 
		myframe.setAttribute('frameborder', '0')
		myframe.setAttribute('width', '0');
		myframe.setAttribute('height', '0');
		if (myframe.attachEvent)
			{
				myframe.attachEvent('onload', function()
					{
						top.location = 'http://yahoo.com';  //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html 
					});
					}
		else if (myframe.addEventListener)
			{
				myframe.addEventListener('load', function()
					{
						top.location = ('http://yahoo.com');
					}, false);
					}
		page_body[0].appendChild(myframe);

	</script>
</body>
</html>

I have an example of some code which displays the full screen iframe, but my problem is...

...I can't figure out how to redirect to this after the hidden iframe has loaded

Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded:

Code:

<html>
<head>
	<script type="text/javascript">
 		function sendParams() {
 			document.body.style.overflow = "hidden";
 		}
	</script>
</head>
<body>
	 <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> 
	<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>

I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas.

If you can help, you'll have some serious gratitude and good karma thrown your way!

Best wishes, and thanks in advance,
Paul

Hi there everybody,
I've got this problem which I can't solve myself...

I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe.

Unfortunally I can't get this to work... Will somebody please help me?

Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.

Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.
We have a central area which can be longer or shorter depending on the forum.

I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total.

Here is the bit that does the calculation:
Code:

function advCalc(selected) {

	var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;

	result = result.toFixed(2) ;
	result = addCommas(result) ;
	
	document.getElementById("total"+selected).innerHTML = result ;

}

The bit that adds a new row of fields is:
Code:

function addPart(divName){
          var newdiv = document.createElement('div') ;
		  newdiv.setAttribute('id', 'partrow' + counter) ;
		  newdiv.setAttribute('style', 'clear:both;') ;
          newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>&pound;</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
          document.getElementById(divName).appendChild(newdiv) ;
          counter++ ;
}

The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc.

It isn't working for any other fields added but I can't see what is wrong

I'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed.

So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write.

Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script.

Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script.

Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too.

Thanks in advance!

I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html
it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page:
http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html
which is not very clean at all, this is the javascript that i found that at least works:

Child iframe script:

Code:

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

Parent iframe Script:

Code:

<script type="text/javascript">
(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}
	var f = getQval('frame'), s = getQval('src');
	if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
		frames[f].location.href = s;
	}
})();
</script>

Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance.

Hi i have a function (i wont write it out coz it is too long!) but after i have done the main calculations within this function i wont to display some of the variables in a table.

i have writen:

document.write(
<table border="1">
<tr><td>
Value 1
</td><td>
document.write(a); //here *
</td></tr>
</table>
);

were it says "here *" i wont to write within the table variable a (which i have defined properly in the function).
However, as i have already written document.write it actually displays the text "document.write(a);" instead of the value for var a.

Help asap please as it in for school soon!

Thanks in advanced
:D

Hi,

Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks.

I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that.

This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox):

Code:

function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}

Is it possible?

Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem:

I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix:

Code:

<script>
// No redirection! 
var prevent_bust = 0  
window.onbeforeunload = function() { prevent_bust++ }  
setInterval(function() {  
  if (prevent_bust > 0) {  
    prevent_bust -= 2
    window.top.location = 'http://www.mysite.com/my404.html'
  }  
}, 1)
</script>

What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html.

Is there another solution for me so that the page within the iframe cannot redirect the parent page?

Hi

I have a page with 3 iFrames, showing different content.

iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2
iFrame2: Here is a list of items from a database.
iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A).

When the (A) php page loads, it should reload iFrame2

I have tried to put something like:
<body onLoad=parent.location.reload()>
and put it on the (A) php page.

This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload...

So, I was looking for the right code to put, like onLoad=iFrame2.location.reload()

However, I can't seem to find the correct code, so I hope any of you can help me...

Hello....

I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first.
Code:

 <div id="top-navigation" title="top-navi">
        <ul><li id="homePageLink" class="first">
                  <a  id="homePageTab"  class="navigation-font" href="</a>
              </li>
        </ul>
  </div>

In the above code how can i change the class="navigation-font" from the first iframe?

Please help....

Hello, I'm new to Javascript.

I know how to make a script that when you click on a button it changes a variable. I also know that with document.write I can express this variable but I do not know how to refresh document.write!

For example,

if I have a var car =3
and when I click on a button car++ (or increases by 1 so it becomes 4 then 5 and so forth depending how many times you click the button)
and I write document.write (car), it only shows the 3 and no matter how many times I click on the button, the 3 doesn't change. How can I get the document.write to show the updated variable?

Thanks!

So I want to have a button that when I click it will change this variable and that number will change live on the page.