...

View Full Version : Opening frames in a separate page and NOT by "document.write" - HELP needed, please!



VatsaL
12-21-2006, 06:42 PM
Hello everyone

I am using a search form which, on submission, uses document.write to produce a page with two frames.

this is the document.write code:


function search2(item){
stringPlus();
resultsWindow=window.open('', 'SSearch', 'toolbar=yes,location=no,directories=no,status=yes,menubar=yes,width=1000,height=600,resizable=1,scr ollbars=auto');
resultsWindow.document.open();
resultsWindow.document.write("<head><title>Images</title></head>");
resultsWindow.document.write("<FRAMESET ROWS=9%,91% border=0><FRAME NAME='frame0' SRC='" + computeFrameSrc(0) + "'><FRAME NAME='frame1' SRC='" + computeFrameSrc(1) + "'></FRAMESET>");
resultsWindow.document.close();
got = 0;
}



How can I get these two frames two open up in a separate page, say results.htm, and NOT through document.write?

It is a part of this script, which opens search results according to which boxes are checked.

http://www.b3ta.cr3ation.co.uk/data/js/search.js

I had edited the script, so that it would open the same results every single time.

But how can I make the results open up in a separatly specified page rather than using document.write??


HELPPP!

many thanks,
vatsal.

j9ine
12-21-2006, 08:52 PM
function search2(item){
stringPlus();
window.open(computeFrameSrc(0), 'SSearch0', 'toolbar=yes,location=no,directories=no,status=yes,menubar=yes,width=1000,height=600,resizable=1,scr ollbars=auto');
window.open(computeFrameSrc(1), 'SSearch1', 'toolbar=yes,location=no,directories=no,status=yes,menubar=yes,width=1000,height=600,resizable=1,scr ollbars=auto');
got = 0;
}


or to display both frames on the same page



//create a basic template for the search results and save as results.htm
<html>
<head>
<title>The Results</title>
</head>
<body>
<iframe name="frame1" id="frame1" src="" width="300" height="200"></iframe><br>
<iframe name="frame2" id="frame2" src="" width="300" height="200"></iframe>
</body>
</html>

function search2(item){
stringPlus();
var win = window.open('results.htm', 'SSearch', 'toolbar=yes,location=no,directories=no,status=yes,menubar=yes,width=1000,height=600,resizable=1,scr ollbars=auto');
win.onload = function() {
win.document.getElementById('frame1').setAttribute('src',computeFrameSrc(0));
win.document.getElementById('frame2').setAttribute('src',computeFrameSrc(1));
}
got = 0;
}

VatsaL
12-21-2006, 10:31 PM
hello j9ine,

thanks a lot for the codes, the first one works well although its not what I require.



the second one, which is what I want, does open up the window with the frames, but the frames dont display the search. they just remain empty!

I have set up a demo page using your second code:

http://scratchpad.50webs.com/frames/index.htm

Any idea how to fix it?


thanks once again for the codes.

j9ine
12-22-2006, 06:05 PM
Firefox requires that you wait until the document has finished loading before modifying any attributes. Therefore you need to include the win.onload to make the code work in Firefox. I originally only tested the code in FF which does work, but as it turns out IE does not need the win.onload command to make it work. The code below should work for both browsers.


function search2(item){
stringPlus();
var win = window.open('results.htm', 'SSearch', 'toolbar=yes,location=no,directories=no,status=yes,menubar=yes,width=1000,height=600,resizable=1,scr ollbars=auto');
if (navigator.appName.indexOf('Microsoft')==-1) {
win.onload = function() {
win.document.getElementById('frame1').setAttribute('src',computeFrameSrc(0));
win.document.getElementById('frame2').setAttribute('src',computeFrameSrc(1));
}
} else {
win.document.getElementById('frame1').setAttribute('src',computeFrameSrc(0));
win.document.getElementById('frame2').setAttribute('src',computeFrameSrc(1));
}
got = 0;
}

VatsaL
12-22-2006, 11:32 PM
Hi again,

I updatged my example page with the script you provided. http://scratchpad.50webs.com/frames

However, it shows an error in IE6, and the both the <iframes> remain blank.

Here is the screen shot:

http://www.b3ta.cr3ation.co.uk/data/gif/frame_error.gif

Is it possible to obtain that without window.onload commands?
Onload commands keep interfearing as i'm launching the frame page from within the ajax tabs.

I want a page in frames through a separate page and NOT through document.write just so that I can target the other frame.

I discovered that when I assigned target="frame1" to the <form> tag in the page in one of the frames, the form didnt target the action to the second frame. Instead, showed just an error.

To get a rough idea, I want to make it like this:

http://www.turboscout.com/index2.php?q=google&Search=Search&e=w-findwhat

..so that the form in the top frame has the value passed on from the submit page, and the second frmae has the search page.

Do you think the iframes can work without the window.onload event?


thanks

j9ine
12-23-2006, 06:58 PM
The document has to finish loading before you can modify any elements/attributes. Otherwise you will receive the error displayed in the screen capture you posted. Since the document hadn't finished loading before the code tried to change the iframe src it threw an error. The iframe element had not yet been loaded in the page which prevented the code from changing any of it's attributes. Therefore you have to use the onload event to insure that all elements are loaded before changing their attributes dynamically.

However, your test page is working well in FF. This is just an issue in IE. There are a number of ways you can pass values between windows. The only thing you need to keep in mind is to make sure that the document has completed loading before modifying any elements. For example, you could choose to include the onload event in the results.htm file instead.


<script>
window.onload = function() {
//change iframe src here
}
</script>

And you could pass the new values for the iframe as a parameter in the results.htm url.


window.open('results.htm?src1='+escape(computeFrameSrc(0))+'&src2='+escape(computeFrameSrc(0)));

Then simply split the window.location.href value in the new window after the window.onload event is called and change the iframe src attributes.


window.onload = function() {
var tmp = window.location.href.split('?src1=');
var urls = tmp[1].split('&src2=');
document.getElementById('frame1').setAttribute('src',unescape(urls[0]));
document.getElementById('frame2').setAttribute('src',unescape(urls[1]));
}

j9ine
12-23-2006, 07:21 PM
I've tested this code in both IE and FF and it works without errors.


/********search.js**********/
function search2(item){
stringPlus();
window.open('results.htm?src1='+escape(computeFrameSrc(0))+'&src2='+escape(computeFrameSrc(0)));
got = 0;
}

/********results.htm*******/
<html>
<head>
<title>The Results</title>
<script>
window.onload = function() {
var tmp = window.location.href.split('?src1=');
var urls = tmp[1].split('&src2=');
document.getElementById('frame1').setAttribute('src',unescape(urls[0]));
document.getElementById('frame2').setAttribute('src',unescape(urls[1]));
}
</script>
</head>
<body>
<iframe name="frame1" id="frame1" src="" width="300" height="200"></iframe><br>
<iframe name="frame2" id="frame2" src="" width="300" height="200"></iframe>
</body>
</html>

VatsaL
12-23-2006, 07:38 PM
man you have no clue of how relieved I am.

I was behind this since a month, as I'm not a pro in javascript, was trying out these scripts just by trial and error.

thanks a billion for makin it all work..

cheers, vatsal :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum