Frame Handling
Jul 23, 2005I'm looking for tutorials or articles considering HTML Frames and how to
handle them with Javascript.
E.g. samples how Frames can exchange information, can a Frame instruct
other Frame to update it's content etc.
I'm looking for tutorials or articles considering HTML Frames and how to
handle them with Javascript.
E.g. samples how Frames can exchange information, can a Frame instruct
other Frame to update it's content etc.
I have a domain: example.com; which is the parent.And a subdomain: api.example.com; which page 'receiver.html' is being loaded in an iframe, child of parent. Both pages set document.domain = example.com.
I'm trying to adapt this code:[url] but Idon't want to load jQuery from the <iframe> again but I need to have the method $.ajax() working from the <iframe> otherwise it would be a cross-domain request and the browser would abort it. I tried ingenuously to set via $('iframe')[0].contentWindow.$.ajax = $.ajax() and I just got a shortcut to the parent page jQuery method. I also tried to "clone" it using $.expand (true...) but the method doesn't work for me; probably because of the complexity of the objected I'm trying to clone. So is there a way for me to use jQuery to have only a $.ajax() method in the <iframe> ? I've thought even about creating a XHR in the child-iframe and then use that in the $.ajaxSetup ({xhr: THATNEWXHR}) but I couldn't do it. I mean, I want to use the XHR factory from jQuery (which has fallbacks for IE, etc) but it has to be created from the iframe-child.
Maybe there is other way to make the AJAX call come from the child-iframe.
If you're wondering "why don't you load jQuery from <script> in the child-iframe", there is a reason... As I'm using jQuery plugins + my own custom javascripts + other independent scripts I created a compiler which minifies each file and bundle them in one. The advantage of this is the reduction of HTTP requests. So "why don't you load that bundle inside the child-iframe?", because it's ugly and Twitter doesn't... Yeah, I like to take Twitter as a reference and I think if they were able to make it so can I;
I got to work in most browsers except IE and Operaby doing it with pure javascript.
I'm "attaching" the code for you guys to test. If you open it with Chrome, Safari or Firefox you will receive 2 alerts one with the return of $.get() and another with the return of a request made via XMLHttpsRequest object. Otherwise (if you open it with IE or Opera) you'll get 'undefined' in the first alert but the real return in the second.
This is the example.com/index.htm:
Im trying to make a back button that reloads the previous page the user was at.
The back button will be on a small top frame and the page that needs to be controlled will be in the main frame.
The top frame is just a navigation system, and all pages will be loaded in the main frame.
Im trying to use this Code:
<FORM>
<INPUT TYPE="button"
NAME="back"
VALUE="BACK"
onClick="history.go(-1)">
</FORM>
Does anyone know how I could accoplish the desired result using this code, or any other code? And what about a foreward button?
I want to have a main image in place and when you click on 1 of the 3 frame options the frame changes showing a preview. Also I would like the add to cart button change its code to add the correct item as well.
View 2 Replies View Relatedi need to pass the data in the textfields from the left frame to the textfields in the right frame of my frameset. (ex: dslnum of frame1 will be pass to txtDSLTN of frame2)[URL]
View 19 Replies View RelatedI have two frames (frameset, let's call it frame1 and frame2). Frame1 has links..., and frame2. When some link in frame1 is clicked, it must be changed content of the frame2. Here's example: click. How to do that? (I don't see any javascript code)
View 2 Replies View RelatedI have a parent document that has a frameset with two frames in it. The first frame is a "header" that runs across the top of the site, and never changes. The second frame contains the "content" of the site. Essentially, I am trying to figure out how to prevent the header appearing above external sites when the user clicks an external link in the "content" frame.
Every time the content frame changes to a new URL, I would like the check that URL and determine if the content frame is changing to an external URL (i.e. different domain in URL) or to an internal link (same domain in URL). If the content is changing to an external link, I want to break out of the frame and just load that external link in the top most document.
I would like all of my javascript to be in the parent document, not spread throughout the individual pages of the site. I was trying to approach this by setting the onunload event handler of the content frame, but I am left with a couple of specific questions:
1. In handling an unload event, can you determine the next URL that the document is loading? Code:
I have a little problem, I structure my site with a main page index.html with a frame in the central whit name CENTRALE, so every other page I will open within this frame. Now I need to have a direct link to these internal pages, give an example I wish it were possible to go to the page clothing giving a direct link to that section of the site type www.indirizzo.com / clothing.html because the state of things if I take the 'direct address to that page I open only the part inside of the frame, but I wish I would open inside the "main frame, there is a solution in javascrip to overcome this problem?
View 4 Replies View RelatedI have a frameset with two frames; topFrame and mainFrame. I have code in topFrame and wish to print the contents of mainFrame. The code that I have used has worked for many years and still works on my localhost Apache Server. However, it has now "stopped" working. When I press the button in topFrame it prints the contents of topFrame The code that I am using is
Code:
window.parent.mainFrame.focus()
window.print
I have tried to replace the first line with..
[Code]...
I use dreamweaver mx html editor to make web sites. I think I know enough Html to get by. My new site uses a frame set so the head and controller don't change reload or move. This works nice, now all I have to do to make a new page is make the content page. But my problem is if I send out a link for someone to look at, it only loads the content page and not the frame set. I thought I could use javascript to determine if the frame set is present and if not load it. But I can't seem to find a way to sent variables from one frame to another. Also if a user clicks a link I would like my flash controller to reflect it.
[Code]...
I need to know how to refresh a bottom frame TO a specific dynamic URL from my top frame (meaning the code has to be in the top frame) say every 5 seconds. The top frame will be a php file as I need DB values. But I believe the frame thing is done via javascript. This ain't working so far, it only loads the first URL at not the rest. Is there the ability to refresh to a specific url in a target frame. Code:
View 5 Replies View RelatedOne more question about manipulating iframes. In a script I've looked through to investigate AJAX file uploads, there is this technique for accessing the contents of an iframe:
Code:
if(frame.contentWindow)
{
var thebody = frame.contentWindow.document.body;
}else if(frame.contentDocument)
{
var thebody = frame.contentDocument.document.body;
}
I haven't been able to find much info on contentWindow and contentDocument. In fact, other sources I've found talk only about using contentWindow to access an iframe's contents, ignoring contentDocument completely. What is the difference between the two, and what browsers is the contentDocument check targeting? Any modern browsers, or is this a backward compatibility thing?
anyway, i have 2 frames. how can i close the top frame from a link within the top frame? i want the lower frame to be the only page displayed but i won't be able to know what the lower frame's url will be.
View 1 Replies View RelatedWe have some date fields in our HTML forms in various places. In the
accounts package we use, there is some pretty nifty date handling.
It has a standardised date format of dd/mm/yyyy and if you enter e.g.
3-12 it will switch it to 3/12/2005
Same applies for e.g. 3:12 etc
Anyone know of some javascript which will do this for our HTML form
fields? Our target format is actually dd-mon-yyyy and it would make it
really nice for users if the system could accept a variety of input
formats and then switch it to a date to our specification. Any
suggestions?
I have few textfields and dropdowns in my jsp, form is submitted on
clicking an image link.
In case there is an error for instance some text field is left empty,
then message is displayed below respective fields ( using spans, inner
html). The message is displayed onblur event of the field. So if there
was an error then message is displayed, now if the user corrects the
error and clicks the link then first the message disaapears ,which is
desired ,but he has to click again to submit the form. please suggest a
way to handle this. So that user doesn't have to click the link twice
to submit the form.I tried having onmousedown and onfocus events on
image , but then sometimes the form was submitted twice which gave
backend errors.
I have a piece of simple code which take the user inputs and depending which check box is selected directs them to a different page.
<form name="allform">
<input type="radio" name="allsearch" value="Weaksearch">
<font face="Arial,Helvetica" >Weak </font><br>
<input type="radio" name="allsearch" value="Pinsersearch">
<font face="Arial,Helvetica" >Pinser </font><br>
<input type="radio" name="allsearch" value="Brutesearch">
<font face="Arial,Helvetica">Brute note </font> <br>
<input type="radio" name="allsearch" checked
value="gogsearch">
<font face="Arial,Helvetica">Google</font> <br>
<input type=text name=allsearchtext size=10 maxlength=255>
<input type="button" onClick="locateall(this)" value="Go"
name="button">
</form>
This works but the user needs to hit the go button, if they just hit return the text field is emptied, I would like if the user hits ENTER, the search begins.
I believe I can add something similar as
if (window.event.keyCode == 13)
But I am not sure how to incorporate it in the form?
I am struggling to find definitive information on how IE 5.5, 6 and 7
handle character input (I am happy with the display of text).
I have two main questions:
1. Does IE automaticall convert text input in HTML forms from the
native character set (e.g. SJIS, 8859-1 etc) to UTF-8 prior to sending
the input back to the server?
2. Does IE Javascript do the same? So if I write a Javascript function
that compares a UTF-8 string to a string that a user has inputted into
a text box, will IE convert the user's string into UTF-8 before doing
the comparison?
I think that the answer to question 1 is probably "YES", but I cannot
find any information on question 2!
Geeting a JS error from IE 6 only in this method: handle: function( event ) { var all, handlers, namespaces, namespace, events;
[Code]...
On the last line of the code snippet above. It appears to me that IE6 doesn't like the fact that the events object is undefined. To trigger this error we are doing a simple blur binding to an input box. ex:
$(field).bind('blur', function(){onfocusout(this);}); It appears IE 6 stops executing JS after the error (imagine that). Is this an issue in jQuery core or BTW I know MS has dropped IE 6 support but we still have customers.
I have javascript calculating the total price of all the products in a shoppping cart. The prices are in the format of 10.99 or 5.50 or 10 ete.g if there are five items bought for 10.99 and 1 bought for 10, the script will multiply 10.99 by 3, then multiply 10 by one, then add the two results.
The resulting number is sometimes right, but quite often it ads an extra '000000002' or so to the amount??
[Code]...
a common task when writing multi-use functions, is deciphering the type of data passed to the function.
Javascript's built-in data identification methods complicate function writing, by imposing a "20 questions" style interogation to determine the actual, useful to a programmer, type.
they also slow down functions, requiring both a function execution and a comparision operation upon every type guess.
a common method is something like:
if(typeof x=='string'){ };
but this has several limitations. for example:
x=[1,2,3];
typeof x; //returns 'object'
safely catching an undefined is often done like:
if(typeof x != 'undefined' ){ };
my function making got a lot easier after writing these simple prototypes:
String.prototype.type="string";
Array.prototype.type="array";
Number.prototype.type="number";
Boolean.prototype.type="boolean";
Date.prototype.type="date";
Object.prototype.type="object";
RegExp.prototype.type="regexp";
Function.prototype.type="function"
if(!!window.XML)XML.prototype.type="xml";
String.prototype.isString=1;
Array.prototype.isArray=1;
Number.prototype.isNumber=1;
Boolean.prototype.isBoolean=1;
Date.prototype.isDate=1;
Object.prototype.isObject=1;
RegExp.prototype.isRegExp=1;
Function.prototype.isFunction=1;
if(!!window.XML)XML.prototype.isXML=1;
the result?
shorter simpler code.
examples:
// smarter object typin':
[1,2,3].type; //returns 'array'
//when expecting a string or array possibility:
y=x.isString?x:x.join();
//more-flexible event handling:
function doBold(elm){ //accepts element object or id string...
if(elm.isString){elm=document.getElementById(elm);}
elm.style.fontWeight="bold";
}//end doBold
// detect an undefined variable:
if( ! x.type){ alert('x is undefined')};
by tucking the protos in your script file, you get simpler, faster-executing code. (for a tiny bit of overhead)
if script length is of upmost concern (as in a bookmarklet), these smaller protos give you simpler typing: (without the speed benefits...)
Object.prototype.type=function(){return typeof this;};
//usage:
switch(x.type()){
case 'string': return x;
case 'date': return x.toLocaleString();
case 'array': return x.join('
');
default: return x.toString();
}//end switch;
//another one:
Object.prototype.isType=function(strType){return (!! typeof this === strType)};
//usage:
x=101;
x.isType('string'); //returns false
x.isType('number'); //returns true
I have two div elements (both dynamically created, one within the other). The parent div has an event attached to it:
contextmenuDIV.onmouseout = function () {doSomething()}
for example. However the onmouseout event will fire when you mouseover the child div as (of course) I am technically leaving the div layer (despite it being the parent).
Is there anyway to cancel this? I've read all about bubbling and all that, but it's just confusing me even more!
Anyway, at all, to allow me to have divs within another div element but only allow the event to fire for the parent!
why I should use the dom level 2 event handling over inline events like ...
Code HTML4Strict:
<a href="http://www.yahoo.com" onClick="myFunction()">click me</a>
I work in a team of developers and our pages are dynamically created using Java.I can at any moment change the inline JS across a site due to this so changes are easier then if the site was just static HTML.As far as reasons to use dom 2 over inline, I looking for something beyond:
it separates behavior from html
it is a best practice
it is the 'modern' way of doing it
I need facts that explain why it is a best practice or why 'modern' is better like : you can only assign one function action to the event.That was just an example which I see but is not true to me.I can either assign multiple functions to it like:
Code HTML4Strict:
<a href="http://www.yahoo.com" onClick="myFunctionA();myFunctionB();myFunctionC()">click me</a>
or I can call my functions from a single function call like
Code HTML4Strict: <a href="http://www.yahoo.com" onClick="myMultiFunctionCall()">click me</a>
and then have a function defined before the inline call like
Code JavaScript:
function myMultiFunctionCall()
{[code].....
Here the second statement overwrites the first.By the way, here is a con for using dom and to me a big one considering debugging: you can't see what event handlers are assigned to what unlike inline where it is obvious because it is in the page. see http:[url].......
I am working on this web site with some of the pages at a different domain name. It is actually one web site, but some of the pages are at a different domain name (different root, too) although the IP address is the same.
Basically, there is one main window, and a pop-up window. They need to "talk" to each other - mainly access properties to see what page they are on.
As, the web site is on two domain names, there is a security problem when the pop-up window tries to read properties in the main window, or vice versa.
Is there anyway to share information between the two? Or is it hopeless?
The following bit of javascript writes and retrieves a cookie which counts a users visits to the page. Then using swfobject it both embeds main_banner.swf and passes the cookie value "visits" to it via flashvars. The trouble is in the actionscript below; the vallue has been passed (this is certain, because the .swf shows up rather than the alternative content)- but the .swf is stuck on the first frame rather than processing the cookie and sending the user to the appropriate frame label.
View 1 Replies View RelatedI am having a list (ul) in which a mouse over will populate its sub categories as list under that(like tree) and so on. My problem is, when passes mouse over a 2nd or 3rd level element, 2 mouse over events will be fired (The actual one and its parent) The sample code is given below
HTML Code:
<ul>
<li>
Root[code]............
How can I have a button with onclick that calls a function which returns a true/false based on the associated input, and based on the return value shows a message that it was true or false. I see how onclick can call one function, but is there a way to call two functions and use the return value of one of the functions?
[Code]....