a problem with frames

@knkkJun 13.2007

Hi,

I want to put an iframe (or a frame) in a page on my website, with the content in the iframe coming from another website. But I want the entire page to reload when (1) anyone clicks on any link in the iframe, and (2) anyone clicks on any button (after submitting a form) in the iframe.

Then why am I using an iframe? Well, that is a channel on my site being powered by the other site. So the look and feel should be mine, but the block in the iframe comes from them.

Is there any way to do this?

I had an idea (actually this idea was in another site, it’s not mine) that I could put all my content in frames too (header, right side ad and footer), and write a JavaScript function like this that I would get the other site to put in the HTML of all its content that appears in the iframe:

function doThree(pageA,pageB,pageC)
{
(parent.frame1.location=pageA);
(parent.frame2.location=page?;
(parent.frame3.location=pageC);
}

and get every hyperlink on the other site look like this:

<a href=”whatever” onclick=”doThree(‘newpage1.html’,’newpage2.html’,’newpage3. html’)”>ONE LINK changes all frames</a>

The hassle is, they might crib about having to recode a zillion <a href> tags. So is there any way that this could be done in the CSS of the other site itself, by making every hyperlink (anchor tag) automatically run that onclick function, so that I do not have to worry about the manual effort of re-hardcoding several <a href>s, and the missing out that might happen?

I would really, really appreciate any pointers – either a solution to what I asked, or a completely different approach altogether ?.

Again, I would want the frames belonging to my content (as opposed to the frame containing their content) to reload even when someone clicks on a submit button.

Thank you for reading this through!

to post a comment

JavaScript

3 Comments(s) _↴

@toicontienJun 13.2007 — #I think I can get what you want. I'm assuming you are using an IFRAME and it's the links and forms in the IFRAME that you want to "break out" of the frame, and load in the main window.

/**
 * @class     window
 *
 * @function  getTags
 *    Shortcut function for *.getElementsByTagName. If no parameters are
 *    given, it gets all the tags in the HTML document. You can optionally
 *    limit it to a certain tag name, and also specify the source DOM node at
 *    which to start searching. If document.getElementsByTagName is not
 *    supported, an empty array is returned.
 *
 * @param     t (string, required)
 *    Name of the tags to search for. Pass '*' as the first argument to get
 *    a list of all HTML tags in the document.
 *
 * @param     src (variable, required)
 *    DOM reference or Id to start searching from.
 *
 * @param     callback (object, optional)
 *    A function that gets executed on each iteration of the loop for
 *    matching elements. This function is passed two parameters: the node
 *    reference to the current element and the index at which it was found.
 *    <br/>
 * @return    array
 *    Collection of DOM references
 */
 function getTags(t, src, callback) {
 var els = [];
 if (document.getElementsByTagName &amp;&amp; document.getElementById) {
 if (!src) {
 src = document;
 } else if (typeof(src) === 'string') {
 src = document.getElementById(src);
 }
 els = src.getElementsByTagName(t);
 if (callback) {
 for (var i=0, end = els.length; i &lt; end; i++) {
 callback(els[i], i);
 }
 }
 }
 return els;
 }
 
 
 window.onload = function() {
 getTags('a', window.frames.IFRAME_NAME.document, function(el, i) {
 el.target = '_parent';
 });
 getTags('form', window.frames.IFRAME_NAME.document, function(el, i) {
 el.target = '_parent';
 });
 };

@knkkauthorJun 14.2007 — #Toicontien, that was a hell of a job - thanks so much for your time!

There was something erroneous in your assumption - maybe I did not write my problem properly. The iframe contents should not break out of the page - when this iframe reloads, it merely needs to reload all other frames too.

So I did this (upon suggestion from someone else):

function loadMyPages(pageA, pageB, pageC){

window.frames["frame1"].location.href = pageA;

window.frames["frame2"].location.href = pageB;

window.frames["frame3"].location.href = pageC;

}

<iframe src="http://www.othersite.com" onload="loadMyPages('newpage1.html','newpage2.html','newpage3.html')"></iframe>

<iframe name="frame1" src="mypage1.html"></iframe>

<iframe name="frame2" src="mypage2.html"></iframe>

<iframe name="frame3" src="mypage3.html"></iframe>

The page is here - I am still testing this, so you might find some borders etc.

http://www.fullhyderabad.com/htdocs/jobs/home.html

There's a small problem with that piece of code, though. The first time that I load the page, all the iframes (4 of mine, and 1 of the partner channel) load, but the moment the partner channel's iframe finishes loading, it reloads all my iframes. So, all my iframes load twice the first time.

Do you have any ideas on how to overcome this? Thank you for your time, as always!

@knkkauthorJun 15.2007 — #Well, I did this (thanks to <a href="http://www.codingforums.com/showthread.php?p=576297#post576297">help</a> - for the benefit of other people who need to do this, here is how:

[CODE]var loaded = 1;
 function loadMyPages(pageA, pageB, pageC)
 {
 if (loaded>1){
 window.frames["frame1"].location.href = pageA;
 window.frames["frame2"].location.href = pageB;
 window.frames["frame3"].location.href = pageC;
 }
 loaded++;
 }
 
 <iframe src="http://www.othersite.com" onload="loadMyPages('newpage1.html','newpage2.html','newpage3.html')"></iframe>
 
 <iframe name="frame1" src="mypage1.html"></iframe>
 <iframe name="frame2" src="mypage2.html"></iframe>
 <iframe name="frame3" src="mypage3.html"></iframe>[/CODE]

Also in #JavaScript _↴

Onmouseover Image Trail/Preview Calculated Field How can I emmulate a VB MsgBox with JS?

Success!

Help @knkk spread the word by sharing this article on Twitter...

Tweet This

a problem with frames

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

a problem with frames

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴