javascript

The <javascript> element points to a JavaScript file that is executed when Xopus activates an Xopus Canvas. The script is executed after the configuration is loaded but before any associated files are loaded. The script has full access to the Xopus API.

<x:config version="1.0" xmlns:x="http://www.xopus.com/xmlns/config">
  <x:javascript src="js/editing-helpers.js"/>
  <x:pipeline xml="xml/doc.xml" xsd="xsd/schema.xsd">
    <x:view name="WYSIWYG view">
      <x:transform xsl="xsl/presentation.xsl"/>
    </x:view>
  </x:pipeline>
</x:config>

Main advantage over using a <script> element in the HTML is that the Xopus API is fully initalized when the <javascript> is executed. Rule of the thumb is: when the script contains references to global API properties like Editor or IO, use <javascript>. When doesn't use the Xopus API (libraries like jQuery or Dojo don't, for example), use a <script> element outside of the Xopus Configuration for better performance.

Using the API outside the Xopus iframe

When Xopus is used in an <iframe> within a CMS, you'd probably want to access the API for loading documents. The easiest way to enable access from outside the iframe is to use a callback function for that. Outside Xopus, use the following script, we'll call xopusproxy.js:

var XopusProxy = (function () {

if (typeof Editor !== "undefined")
{
  // This part of the script is run within Xopus,
  try
  {
    for (var parent; parent !== window.parent && (parent = window.parent);)
      if (typeof parent.XopusProxy !== "undefined")
        parent.XopusProxy.setEditor(Editor);
  }
  catch (e)
  {
    // Access denied to a parent window
  }
}

return {
  setEditor: function (editor) { this.editor = editor },
  getEditor: function () { return this.editor || null },
  setIO:     function (io) { this.io = io },
  getIO:     function () { return this.io || null },
  setURL:    function (uri) {
               if (this.getEditor() === null)
                 alert("Xopus is not started yet");
               else
                 this.getEditor().setURL(uri);
             }
};

})();

Now use the following line in your Xopus Configuration:

<x:javascript src="xopusproxy.js"/>

Now you could use the following code outside of Xopus:

<script type="text/javascript" src="xopusproxy.js"></script>
…
<table>
  <tr>
    <th><a href="XopusProxy.setURL('manuals/m800.xml')">Microwave M800 manual</a></th>
    <td>24th January, 2006</td>
  </tr>
</table>

Documentation
› Configuration
› Elements
› javascript

`javascript` element

Namespace: http://www.xopus.com/xmlns/config

Attributes

src: The URI of a JavaScript file on the server. (Optional)

Parent Elements

config

History