这是一个适用于 SWF10 和 DHTML 运行时的解决方案。我已经用 IE 9、Firefox 和 Chrome 进行了测试。
您的代码有两个问题:
1) 您分配给 <html> 标记的@html 属性的 HTML 片段不应包含完整的 HTML 文档结构。这是 iframemanager.js 库(OpenLaszlo 的一部分)中的 JavaScript,用于将 HTML 片段分配给 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
.
这是您的 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);
}
将 JavaScript 添加到 LZX 文件中的 iFrame 的调用:
lz.Browser.callJS('addJavaScriptToFrame("' + canvas.main.iframeid + '", ' + jsCode + ')');
单击“设置 HTML”按钮设置框架的内容,然后单击“测试”按钮调用 iFrame 内部的 getLoaded() 函数。
![通过 JavaScript 动态设置 iFrame 内容的示例 OpenLaszlo 应用程序](https://i.stack.imgur.com/ybl8L.png)