1

挿入しているhtmlデータに存在する1つのjavascript関数を呼び出そうとしていますが、常にgetLoaded is not a methodというエラーが発生します。コードスニペットを添付しました。なにが問題ですか ？

<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>
4

1 に答える 1

3

これは、SWF10 と DHTML ランタイムの両方で機能するソリューションです。IE 9、Firefox、および Chrome でテストしました。

コードには 2 つの問題があります。

1) <html> タグの @html 属性に割り当てる HTML スニペットには、完全な HTML ドキュメント構造を含めないでください。HTML スニペットを iFrame に割り当てるために使用される iframemanager.js ライブラリ (OpenLaszlo の一部) の JavaScript を次に示します。

,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 コードにそれらをインライン化することはできませんが、以下の完全な例でわかるように「script」要素を作成する必要があります。SWF ランタイムもサポートする場合、最も効率的な方法は、以下に示すようにヘルパー関数を持つ小さな外部 JavaScript 関数を作成することです。

このソリューション用に作成するファイルは 2 つあります。LZX ファイルと、iFrameHelperFunction.js.

以下は、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 は、 でaddJavaScriptToFrame定義されているヘルパー関数を使用して追加する必要がありiFrameHelperFunction.jsます。

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 ファイルの iFrame に JavaScript を追加する呼び出し:

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

[Set HTML] ボタンをクリックしてフレームのコンテンツを設定し、[test] ボタンをクリックして iFrame 内の getLoaded() 関数を呼び出します。

JavaScript を介して動的に設定された iFrame コンテンツを含む OpenLaszlo アプリの例

于 2012-10-17T16:07:49.973 に答える