ManageIframe:Manual:Frame Scripting

From Learn About the Ext JavaScript Library

Jump to: navigation, search

1 Scripting your ManagedIframe
2 managedIframe:execScript
3 managedIframe:loadFunction
4 Advanced Scripting Example

Scripting your ManagedIframe

There are several methods available in the ManagedIframe interface that permit interaction with the embedded frame's document. However, such interaction with the embedded document is only permitted when

the content was retrieved from a local or "same-domain" as that of the frames host page, or
the document was updated directly by either the :load or :update methods

Note: any attempt to execute one of the following functions, on an embedded document loaded from a "foreign domain" will throw an 'execScript:non-secure context' exception. (see the :domWritable method for more details.)

managedIframe:execScript

allows the hosting page of the IFRAME to execute (eval) JavaScript source in the IFRAME's window context.

Syntax:

 execScript( source [, useDom ])

Parameter Description:

source - (string) the string containing javascript source to be evaled.
useDOM - (boolean, optional) If true, the script is written to a <SCRIPT> tag in the frame document <HEAD> section rather than performing an eval on the contents. This mode is useful for debugging environments that support frame-level debugging.

Example:

mif.execScript("location.href="+newUrl);

This statement would be executed in the scope of the frames' Window object and changes the page address (location) of the embedded page.

Remote Script Load example:

MIF.load({ url:'otherLocalPage.html',
          params: {customer: 2398 },
          success : function(){
               Ext.Ajax.request({
                     url    :'libs/YUI.js',
                     success: function(response){
                      MIF.execScript( response.responseText ); }
               });
          }
});

The previous example would make an Ajax request to retrieve the YUI library and execute(eval) it in the embedded frames Window context after the local document has been rendered into the frame document.

managedIframe:loadFunction

The :loadFunction method permits the transfer of an existing function defined within the host-pages Window context to that of the embedded window context and optionally executes it.

Syntax:

 loadFunction( fnName [, useDom ][, invokeIt])
 loadFunction( { name: fnName, fn: function-definition } [, useDom ][, invokeIt])

Parameter Description:

Simple Form:
- fnName - (string) the Name of the pre-defined function accessible in the current scope or host document global namespace.
Function Map Form:
- fnName - (string) the Name of the pre-defined function accessible in the current scope or host document global namespace.
- function-definition - (Function) the Name of the pre-defined function accessible in the current scope

useDOM - (boolean, optional) If true, the function is written to a <SCRIPT> tag in the frame document <HEAD> section rather than performing an eval on the contents. This mode is useful for debugging environments that support frame-level source debugging.
invokeIt - (boolean, optional) If true, the function is executed (without call parameters only) when injected into the frame.

Example: basic form

// Eval a trim function definition into the iframe window context.
// Define the portable trim function:
var trim = function(s){
    return s.replace( /^\s+|\s+$/g,"");
};
MIF.loadFunction('trim', true);  //enclose in a <script> tag

Example: function map form:

MIF.loadFunction({name:'myTrim',fn: String.prototype.trim || trim}, true );
MIF.execScript('alert(myTrim(" Test Trim "))');

The previous example gathers the function definition from 'String.prototype.trim' or the previously-defined 'trim' function and changes its name to 'myTrim' for future execution in the embedded frame.

Advanced Scripting Example

You could for example, execute a graphing package in the IFRAME's window context (without affecting the host page at all):

  var graph_master_src;
  Ext.Ajax.request({
            url:'graphmaster.js'
           ,success: function(response){
                   graph_master_src = response.responseText; }
         });
  // then, later.....
  var graphIt = function(){
     mIframe.execScript(graph_master_src); //load the chart conversion script.
     mIframe.execScript('new graph_master().applyTo("salesResults");'); //apply it to the table
     mIframe.print();  // now print it!
  };
  //As soon as its DOM is ready, execute the chart script
  mIframe.on('documentloaded',graphIt); 
  mIframe.load('graphTable.php'); //generate the results as an HTML table

Retrieved from "http://extjs.com/learn/ManageIframe:Manual:Frame_Scripting"