在flex中使用嵌入html文件以解决显示html的问题

想在flex中真实的显示html,但是texteara,lable,text中只支持部分html标签

<a>、<b>、<br>、<font>、<img>如果用img又存在显示自动换行的问题。只有采用嵌入html的方法来解决。

 

1.flexdemo1

<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" width="427" height="282" viewSourceURL="srcview/index.html">

<mx:Panel x="10" y="10" width="407" height="262" layout="absolute" title="TabNavigator with HTML IFrame Enclosures">

<mx:TabNavigator x="10" y="10" width="367" height="202">

<local:IFrame source="http://www.ff-power.com"  label="T网" width="100%" height="100%">

</local:IFrame>

<local:IFrame source="http://www.ctott.com" label="飞凡动力" width="100%" height="100%">

</local:IFrame>

<local:IFrame source="http://www.ff-power.com/bbs" label="飞凡动力-BBS" width="100%" height="100%">

</local:IFrame>

</mx:TabNavigator>

</mx:Panel>    

</mx:Application>

2.Iframe.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    resize="callLater(moveIFrame)"
    move="callLater(moveIFrame)">
         <mx:Script>
    <![CDATA[
        import flash.external.ExternalInterface;
        import flash.geom.Point;
        import flash.net.navigateToURL;
        private var _source: String;

        private function moveIFrame(): void {

            var localPt:Point = new Point(0, 0);
            var globalPt:Point = this.localToGlobal(localPt);
            ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
        }

        public function set source(source: String): void {
            if (source) {

                if (! ExternalInterface.available)
                {
                    // TODO: determine if this Error is actually needed.  The debugger
                    // build gives the error below.  Assuming that this error will not show
                    // up in the release build but haven't checked.
                    throw new Error("The ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
                }
                _source = source;
                ExternalInterface.call("loadIFrame", source);
            }
        }

        public function get source(): String {
            return _source;
        }

        override public function set visible(visible: Boolean): void {
            super.visible=visible;
            if (visible)
            {
                ExternalInterface.call("showIFrame");
            }
            else
            {
                ExternalInterface.call("hideIFrame");
            }
        }

    ]]>
    </mx:Script>

</mx:Canvas>

 

3.还有script代码

<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 5;
// Minor version of Flash required
var requiredRevision = 0;
// the version of javascript supported
var jsVersion = 1.0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player ActiveX control version information
Function VBGetSwfVer()
  on error resume next
  Dim swControl, swVersion
  swVersion = 0
 
  set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash")
  if (IsObject(swControl)) then
    swVersion = swControl.GetVariable("$version")
  end if
  VBGetSwfVer = swVersion
End Function
// -->
</script>
<script language="JavaScript1.1" type="text/javascript">
<!-- // Detect Client Browser type
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// JavaScript helper required to detect Flash Player PlugIn version information
function JSGetSwfVer(){
    // NS/Opera version >= 3 check for Flash plugin in plugin array
    if (navigator.plugins != null && navigator.plugins.length > 0) {
        if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
            var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
              var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
            descArray = flashDescription.split(" ");
            tempArrayMajor = descArray[2].split(".");
            versionMajor = tempArrayMajor[0];
            versionMinor = tempArrayMajor[1];
            if ( descArray[3] != "" ) {
                tempArrayMinor = descArray[3].split("r");
            } else {
                tempArrayMinor = descArray[4].split("r");
            }
              versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
            flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
          } else {
            flashVer = -1;
        }
    }
    // MSN/WebTV 2.6 supports Flash 4
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
    // WebTV 2.5 supports Flash 3
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
    // older WebTV supports Flash 2
    else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
    // Can't detect in all other cases
    else {
        
        flashVer = -1;
    }
    return flashVer;
}
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
     reqVer = parseFloat(reqMajorVer + "." + reqRevision);
    if (isIE && isWin && !isOpera) {
        versionStr = VBGetSwfVer();
    } else {
        versionStr = JSGetSwfVer();        
    }
    if (versionStr == -1 ) {
        return false;
    } else if (versionStr != 0) {
        if(isIE && isWin && !isOpera) {
            tempArray         = versionStr.split(" ");
            tempString        = tempArray[1];
            versionArray      = tempString .split(",");                
        } else {
            versionArray      = versionStr.split(".");
        }
        versionMajor      = versionArray[0];
        versionMinor      = versionArray[1];
        versionRevision   = versionArray[2];
        
        versionString     = versionMajor + "." + versionRevision;   // 7.0r24 == 7.24
        versionNum        = parseFloat(versionString);
        // is the major.revision >= requested major.revision AND the minor version >= requested minor
        if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
            return true;
        } else {
            return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );    
        }
    }
}

function moveIFrame(x,y,w,h) {
    var frameRef=document.getElementById("myFrame");
    frameRef.style.left=x;
    frameRef.style.top=y;
    frameRef.width=w;
    frameRef.height=h;
}

function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";
}

function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
}

function loadIFrame(url){
    top.frames["myFrame"].location.href=url;
}

// -->
</script>


 

 http://blog.eshangrao.com/2006/02/08/195/ 参考网站

测试文件 flex3

转载于:https://www.cnblogs.com/guola/archive/2008/08/21/1272774.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将圆环水平居、纵向居,并在转动2秒后在圆环正下方的嵌入窗口显示并载入本地 HTML 文件,您可以使用以下代码: ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .loader { border: 16px solid #f3f3f3; border-top: 16px solid yellow; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear forwards; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .content { width: 100%; height: auto; border: none; } </style> </head> <body> <div class="container"> <div class="loader"></div> <iframe class="content" src="" frameborder="0"></iframe> </div> <script> setTimeout(function() { const loader = document.querySelector(".loader"); const content = document.querySelector(".content"); loader.style.display = "none"; content.src = "your_file.html"; }, 2000); </script> </body> </html> ``` 在上述代码,我们使用了一个容器元素 `.container` 来使圆环水平居、纵向居。容器元素设置了 `display: flex;` 和一些 flex 盒子属性,以实现居对齐。圆环和嵌入窗口的样式与之前类似,只是动画时间设为了2秒。 通过 JavaScript 的 `setTimeout` 函数,我们在页面加载后等待2秒,然后隐藏圆环,并将嵌入窗口的 `src` 属性设置为您要嵌入的本地 HTML 文件的路径。 请将上述代码保存为一个新的 HTML 文件,并将 `your_file.html` 替换为要嵌入的本地 HTML 文件的路径。然后,您可以将这个新的 HTML 文件嵌入到其他网页,以实现所需的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值