Mental Jetsam

By Peter Finch

Archive for the ‘javascript’ Category

Communicating between iframes and windows in Javascript

Posted by pcfinch on March 15, 2010

Sometimes it is not possible to keep your entire web application in one window, you may need to “pop-up” a new window or even embed an IFRAME containing another part of your application. If you need to communicate between the two windows the following code can be used in the “child” frames and windows to access Javascript functions in the parent window. Using this method it is possible to make the child window send notifications back to the parent window in order to update the parent windows state, etc. Note that this will only work when the windows and IFRAME’s come from the same domain.

In the parent window (main window) define any javascript functions as normal e.g in “index.html”.

tstFunction = function(message) {
  alert("Main Window " + message) ;
}

Include the following code in the child windows or IFRAMEs e.g. in “popup.html”.

function getParentFunction(funcName) {
  var func = null;
  // Child opened in new window e.g. target="blank"
  if (top.window.opener && !top.window.opener.closed) {
    try { func = eval("top.window.opener."+funcName); } catch (error) {}
  }
  if (!(func)) {
    // Child opened in IFRAME
    try { func = eval("top."+funcName); } catch (error) { }
  }
  if (!(func)) {
    throw new Error("function \""+funcName+"\" is not in parent window.");
  }
  return func; 
}

If you need to call a function defined in the parent window from the child do this.

var foo = getParentFunction("tstFunction") ;
foo("Hello from iframe") ;
Advertisements

Posted in javascript | 4 Comments »

Using Javascript to POST data between pages

Posted by pcfinch on June 2, 2008

The following is a simple example of how to submit data from one HTML page to another using the POST method from Javascript. Normally, if data needs to be sent from one HTML page to another, it is done by appending the information to the query parameter of the the URL in the familiar “name=value” format. e.g.

< href="post.aspx?user=peter&cc=aus">Click</a>

Although this works fine, in most cases, problems occur when there is a lot of data to send and the URL exceeds about 2000 characters. The other disadvantage is that the URL looks ugly. The traditional method to get around this is to POST the data using a form. e.g.

<form name="myform" method="post" action="post.aspx">
<input name="user" value="peter"/>
<input value="cc" value="aus"/>
<a href="javascript:myform.submit()">Click</a>
<form>

This works fine, however, it does tend to make the formatting of the resulting HTML difficult and increases the size of the final HTML page significantly if there are lots of links on it.

The following javascript function takes the URL of the target page and an associative array of name/values paires and POSTs the data to the supplied URL by dynamically creating a form and then submitting it.

function postwith (to,p) {
  var myForm = document.createElement("form");
  myForm.method="post" ;
  myForm.action = to ;
  for (var k in p) {
    var myInput = document.createElement("input") ;
    myInput.setAttribute("name", k) ;
    myInput.setAttribute("value", p[k]);
    myForm.appendChild(myInput) ;
  }
  document.body.appendChild(myForm) ;
  myForm.submit() ;
  document.body.removeChild(myForm) ;
}

To insert a link into a page just use a normal anchor tag in the HTML and call the function.

<a href="javascript:postwith('post.aspx',{user:'peter',cc:'aus'})">click</a>

This works on Microsoft IE, Mozilla Firefox and OS X Safari.

Posted in HTML, javascript | 71 Comments »

Toggle display of DIV in IE and Mozilla

Posted by pcfinch on May 8, 2007

The following code will toggle the display (show/hide) of a division in both IE 5.5+ and Mozilla Firefox and can be used for menus, TOC’s etc. This is simple, but useful. If your looking for a really good collection of cross browser Javascript functions for manipulating HTML and the DOM then check out prototype and if you want a really good overview of the Javascript language, along with some good stories and history of the language, you must see these videos from Dougles Crockford .

function td(d)
{
   if(document.getElementById) {
      var o = document.getElementById(d) ;
      if((o.style.display == "block") || (o.style.display == ""))
         o.style.display = "none" ;
      else
         o.style.display = "block" ;
   }
}

Posted in javascript | 1 Comment »

How to submit a HTML form with the Enter Key

Posted by pcfinch on April 23, 2007

If your form does not have a SUBMIT button then, in some cases the browser will not automatically submit the form when you press ENTER. Here is how to submit the form when the user presses the ENTER key.

The code simply intercepts all the key presses on the page and when the ENTER key is pressed if submits the form by calling the appropriate JavaScript function. In this case submitForm(), however, it could be any other function. This function works on Mozilla and Internet Explorer (IE).

document.onkeypress = processKey;

function processKey(e)
{
  if (null == e)
    e = window.event ;
  if (e.keyCode == 13)  {
    submitForm() ;
  }
}

Posted in HTML, javascript | 8 Comments »