OpenLaszlo <html> 标签/iframe 集成和 JavaScript 调用答案

【问题标题】：OpenLaszlo <html> tag / iframe integration and JavaScript callsOpenLaszlo <html> 标签/iframe 集成和 JavaScript 调用
【发布时间】：2012-10-06 16:47:57
【问题描述】：

我正在尝试调用我插入的 html 数据中存在的一个 javascript 函数，但我总是收到错误 getLoaded is not a method。我附上了代码sn-p。怎么了？

<canvas width="100%" height="100%" >
        <simplelayout axis="y" spacing="2"/>
            <button>Set HTML
                <handler name="onclick">
                    <![CDATA[
                    if (canvas.main) {
                        canvas.main.setAttribute('html', '<html><head><style type="text/css">body {background-color: #ffffff;}</style><script>function getLoaded(){ return document.images.length;}</script></head><body><img id="imageTag" ></img></body></html>');
                    }
                    ]]>
                </handler>
            </button> 

               <button>test
                <handler name="onclick">
                    <![CDATA[
                    if (canvas.main) {
                        var del = new LzDelegate(this,'handlerFunc');
                        canvas.main.callJavascript('getLoaded',del);
                    }
                    ]]>
                </handler>
            </button> 
            <method name="handlerFunc" args="retVal">
                console.log("handlerFunc", retVal);
            </method>

        <html name="main" x = "50" y="50" width="600" height="400" >
            <handler name="oninit">
                this.bringToFront();
            </handler>

        </html>

</canvas>

【问题讨论】：

您使用的是 SWF 还是 DHTML 运行时？
@RajuBitter：我使用的是 swf 环境。
我已经更新了示例以支持 SWF 运行时。

标签： dhtml openlaszlo lzx

【解决方案1】：

这是一个适用于 SWF10 和 DHTML 运行时的解决方案。我已经用 IE 9、Firefox 和 Chrome 进行了测试。

你的代码有两个问题：

1) 您分配给标记的@html 属性的 HTML sn-p 不应包含完整的 HTML 文档结构。这是 iframemanager.js 库（OpenLaszlo 的一部分）中的 JavaScript，用于将 HTML sn-p 分配给 iFrame：

,setHTML: function(id, html) { 
    // must be called after the iframe loads, or it will be overwritten
    if (html) {
        var win = lz.embed.iframemanager.getFrameWindow(id);
        if (win) {
            win.document.body.innerHTML = html;
        }
    }
}

如你所见，html参数的值被赋值给body元素的innerHTML。因此，只包含您正在生成的 HTML 文档的正文就足够了。

2) 如果要将 JavaScript 部分添加到 iFrame，则不能将这些部分内联到要分配给文档的 HTML 代码中，但必须创建一个“脚本”元素，如下面的完整示例所示.如果你还想支持 SWF 运行时，最有效的方法是创建一个小的外部 JavaScript 函数，它有一个辅助函数，如下所示。

我为此解决方案创建了两个文件。 LZX 文件和一个名为 iFrameHelperFunction.js 的外部 JavaScript 文件。

这是 LZX 文件的修改版本：

 <canvas width="100%" height="100%" >

  <wrapperheaders>
    <script type="text/javascript" src="iFrameHelperFunction.js"></script>
  </wrapperheaders>

  <simplelayout axis="y" spacing="2"/>

  <button>Set HTML
     <handler name="onclick">
     <![CDATA[
        if (canvas.main) {
          // Create the HTML content; do not include <html><head><body> structure here,
          // since setting the 'html' attribute of an OpenLaszlo <html> tag will set
          // the innerHTML property of the iFrame's document.body.
          var innerHTML = '<style type="text/css">body {background-color: #ff0000;}</style>'
                   + '<img id="imageTag" src="https://www.google.com/images/srpr/logo3w.png"></img>',
              jsCode = "function getLoaded() { alert('inside getLoaded()'); return 'getLoaded was called'; }";
          canvas.main.setAttribute('html', innerHTML);
          lz.Browser.callJS('addJavaScriptToFrame("' + canvas.main.iframeid + '", ' + jsCode + ')');
        }
        ]]>
    </handler>
  </button>

  <button>test
    <handler name="onclick">
    <![CDATA[
      if (canvas.main) {
        var del = new LzDelegate(canvas, 'handlerFunc');
        canvas.main.callJavascript('getLoaded', del);
      }
    ]]>
    </handler>
  </button>

  <method name="handlerFunc" args="retVal">
    Debug.info("handlerFunc", retVal);
  </method>

  <html name="main" x = "50" y="50" width="600" height="200" >
    <handler name="oninit">
      this.bringToFront();
    </handler>
  </html>

</canvas>

首先，我将自定义 JavaScript 文件添加到页面：

  <wrapperheaders>
    <script type="text/javascript" src="iFrameHelperFunction.js"></script>
  </wrapperheaders>

然后设置为 iFrame 截取的 HTML，类似于您的代码。但是任何添加到 iFrame HTML 页面的 JavaScript 都必须使用在 iFrameHelperFunction.js 中定义的帮助函数 addJavaScriptToFrame 添加：

function addJavaScriptToFrame(frameId, jsCode) {
    var iframeWin = lz.embed.iframemanager.getFrameWindow(frameId);
        doc = iframeWin.document;

    // Scripts can not be inlined in HTML snippets, but must be created through JavaScript
    var scriptEl = doc.createElement('script');
    // The JavaScript function or code you want to add
    scriptEl.text = jsCode;

    // Append the script to the head of the iFrame document
    doc.firstChild.appendChild(scriptEl);
}

在 LZX 文件中将 JavaScript 添加到 iFrame 的调用：

  lz.Browser.callJS('addJavaScriptToFrame("' + canvas.main.iframeid + '", ' + jsCode + ')');

点击“设置HTML”按钮设置框架内容，然后点击“测试”按钮调用iFrame内部的getLoaded()函数。

【讨论】：