具體的一個例子——使用IFrame這個框架的一個頁面的代碼如下:
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="AC_OETags.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>
<script>
<!--
function moveIFrame(x,y,w,h) {
// alert("move to " + 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(){
// alert("hide");
document.getElementById("myFrame").style.visibility="hidden";
}
function showIFrame(){
// alert("show");
document.getElementById("myFrame").style.visibility="visible";
}
function navigateTo(url) {
// alert("nav to " + url);
// alert("from " + document.getElementById("myFrame").location);
document.getElementById("myFrame").src = url;
}
-->
</script>
<script language="VBScript">
<!--
// Catch FS Commands in IE, and pass them to the corresponding JavaScript function.
Sub flexapp_FSCommand(ByVal command, ByVal str)
call flexapp_DoFSCommand(command, str)
end sub
// -->
</script>
</head>
<body style="margin:0px">
<object onMouseDown="document.body.focus();"
classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,14
,0'
width='100%' height='100%'
id='flexapp' name='flexapp'>
<param name='flashvars' value=''>
<param name='src' value='EXPIframe.swf'>
<param name="wmode" value="opaque">
<embed pluginspage='http://www.macromedia.com/go/getflashplayer' width='100%'
height='100%'
flashvars=''
src='EXPIframe.swf'
name='flexapp'
wmode="opaque"
swLiveConnect="true"
/>
</object>
<iframe id="myFrame" name="myFrame"
frameborder="0"
style="position:absolute;background-
color:transparent;border:0px;visibility:hidden;"></iframe>
</body>
</html>
先用現成的組件玩一下,一會再去看看組件源碼研究一下。
http://code.google.com/p/flex-iframe/
下載了flexiframe.swc,引入工程。
flex代碼
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" layout="absolute"
xmlns:code=" <mx:Panel width="500"
height="400">
<code:IFrame id="googleIFrame"
label="Google"
source=" width="100%"
height="100%"/>
</mx:Panel>
</mx:Application>
運行,發現,可以了。
不過,有個問題,鼠標點擊別處的時候,網頁消失了。
找了很多地方,找到了解決方法。設置wmode。
首先了解一下wmode是什么。
window mode(wmode)
wmode即窗口模式總共有三種:
window 模式
默認情況下的顯示模式,在這種模式下flash player有自己的窗口句柄,這就意味著flash影片是存在于Windows中的一個顯示實例,并且是在瀏覽器核心顯示窗口之上的,所以flash只 是貌似顯示在瀏覽器中,但這也是flash最快最有效率的渲染模式。由于他是獨立于瀏覽器的HTML渲染表面,這就導致默認顯示方式下flash總是會遮 住位置與他重合的所有DHTML層。
但是大多數蘋果電腦瀏覽器會允許DHTML層顯示在flash之上,但當flash影片播放時會出現比較詭異的現象,比如DHTML層像被flash刮掉一塊一樣顯示異常。
Opaque 模式
這 是一種無窗口模式,在這種情況下flash player沒有自己的窗口句柄,這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪制的時間和位置。這時flash影片就不會在高于瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可 以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。
Transparent 模式
透明模式, 在這種模式下flash player會將stage的背景色alpha值將為0并且只會繪制stage上真實可見的對象,同樣你也可以使用z-index來控制flash影片的 深度值,但是與Opaque模式不同的是這樣做會降低flash影片的回放效果,而且在9.0.115之前的flash player版本設置wmode=”opaque”或”transparent”會導致全屏模式失效。
這邊,我們將wmode設置為transparent。
我直接修改了工程的html模板,紅色字體部分為新增加的代碼。
if ( hasProductInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", " "wmode","transparent"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", " "wmode","transparent"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
width="${width}" height="${height}" name="${application}" align="center"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage=" wmode="transparent">
</embed>
保存,運行。問題解決了。
下面羅列出了一些常用的正則表達式:
^/d+$ //匹配非負整數(正整數 + 0)
^[0-9]*[1-9][0-9]*$ //匹配正整數
^((-/d+)|(0+))$ //匹配非正整數(負整數 + 0)
^-[0-9]*[1-9][0-9]*$ //匹配負整數
^-?/d+$ //匹配整數
^/d+(/./d+)?$ //匹配非負浮點數(正浮點數 + 0)
^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$ //匹配正浮點數
^((-/d+(/./d+)?)|(0+(/.0+)?))$ //匹配非正浮點數(負浮點數 + 0)
^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$ //匹配負浮點數
^(-?/d+)(/./d+)?$ //匹配浮點數
^[A-Za-z]+$ //匹配由26個英文字母組成的字符串
^[A-Z]+$ //匹配由26個英文字母的大寫組成的字符串
^[a-z]+$ //匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$ //匹配由數字和26個英文字母組成的字符串
^/w+$ //匹配由數字、26個英文字母或者下劃線組成的字符串
^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$ //匹配email地址
^[a-zA-z]+://匹配(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$ //匹配url
匹配中文字符的正則表達式: [/u4e00-/u9fa5]
匹配雙字節字符(包括漢字在內):[^/x00-/xff]
匹配空行的正則表達式:/n[/s| ]*/r
匹配HTML標記的正則表達式:/<(.*)>.*<//>|<(.*) //>/
匹配首尾空格的正則表達式:(^/s*)|(/s*$)
匹配Email地址的正則表達式:/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
匹配網址URL的正則表達式:^[a-zA-z]+://(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$
匹配帳號是否合法(字母開頭,允許5-16字節,允許字母數字下劃線):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
匹配國內電話號碼:(/d{3}-|/d{4}-)?(/d{8}|/d{7})?
匹配騰訊QQ號:^[1-9]*[1-9][0-9]*$
下表是元字符及其在正則表達式上下文中的行為的一個完整列表:
/ 將下一個字符標記為一個特殊字符、或一個原義字符、或一個后向引用、或一個八進制轉義符。
^ 匹配輸入字符串的開始位置。如果設置了 RegExp 對象的Multiline 屬性,^ 也匹配 ’/n’ 或 ’/r’ 之后的位置。
$ 匹配輸入字符串的結束位置。如果設置了 RegExp 對象的Multiline 屬性,$ 也匹配 ’/n’ 或 ’/r’ 之前的位置。
* 匹配前面的子表達式零次或多次。
+ 匹配前面的子表達式一次或多次。+ 等價于 {1,}。
? 匹配前面的子表達式零次或一次。? 等價于 {0,1}。
{n} n 是一個非負整數,匹配確定的n 次。
{n,} n 是一個非負整數,至少匹配n 次。
{n,m} m 和 n 均為非負整數,其中n <= m。最少匹配 n 次且最多匹配 m 次。在逗號和兩個數之間不能有空格。
? 當該字符緊跟在任何一個其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面時,匹配模式是非貪婪的。非貪婪模式盡可能少的匹配所搜索的字符串,而默認的貪婪模式則盡可能多的匹配所搜索的字符串。
. 匹配除 “/n” 之外的任何單個字符。要匹配包括 ’/n’ 在內的任何字符,請使用象 ’[./n]’ 的模式。
(pattern) 匹配pattern 并獲取這一匹配。
(?:pattern) 匹配pattern 但不獲取匹配結果,也就是說這是一個非獲取匹配,不進行存儲供以后使用。
x|y 匹配 x 或 y。
[xyz] 字符集合。
[^xyz] 負值字符集合。
[a-z] 字符范圍,匹配指定范圍內的任意字符。
[^a-z] 負值字符范圍,匹配任何不在指定范圍內的任意字符。
/b 匹配一個單詞邊界,也就是指單詞和空格間的位置。
/B 匹配非單詞邊界。
/cx 匹配由x指明的控制字符。
/d 匹配一個數字字符。等價于 [0-9]。
/D 匹配一個非數字字符。等價于 [^0-9]。
/f 匹配一個換頁符。等價于 /x0c 和 /cL。
/n 匹配一個換行符。等價于 /x0a 和 /cJ。
/r 匹配一個回車符。等價于 /x0d 和 /cM。
/s 匹配任何空白字符,包括空格、制表符、換頁符等等。等價于[ /f/n/r/t/v]。
/S 匹配任何非空白字符。等價于 [^ /f/n/r/t/v]。
/t 匹配一個制表符。等價于 /x09 和 /cI。
/v 匹配一個垂直制表符。等價于 /x0b 和 /cK。
/w 匹配包括下劃線的任何單詞字符。等價于’[A-Za-z0-9_]’。
/W 匹配任何非單詞字符。等價于 ’[^A-Za-z0-9_]’。
/xn 匹配 n,其中 n 為十六進制轉義值。十六進制轉義值必須為確定的兩個數字長。
/num 匹配 num,其中num是一個正整數。對所獲取的匹配的引用。
/n 標識一個八進制轉義值或一個后向引用。如果 /n 之前至少 n 個獲取的子表達式,則 n 為后向引用。否則,如果 n 為八進制數字 (0-7),則 n 為一個八進制轉義值。
/nm 標識一個八進制轉義值或一個后向引用。如果 /nm 之前至少有is preceded by at least nm 個獲取得子表達式,則 nm 為后向引用。如果 /nm 之前至少有 n 個獲取,則 n 為一個后跟文字 m 的后向引用。如果前面的條件都不滿足,若 n 和 m 均為八進制數字 (0-7),則 /nm 將匹配八進制轉義值 nm。
眾所周知Flex主要用于B/S結構程序的開發,凡是這類型的開發都存在頁面間的傳值的問題,通常一般的B/S開發主要不外乎使用地址修改法,隱藏表單域等方法,但是這些方法在Flex中確沒有用,原因是應為Flex支持的模型和普通的B/S開發語言不一樣,一般的B/S開發語言使用的主要是請求/響應模型,而Flex采用的是事件驅動模型(這種模型主要見于C/S結構程序),所以我們的Form表單等傳值方法就無效了,哪么我們如何在兩個這樣模型的頁面中傳遞數據呢?下面我們講述下兩種常用的傳值方法:
一、 利用ExternalInterface調用Javascript
a) 該方法主要利用ExternalInterface的call方法調用Javascript函數,進而修改地址(有點類似于地址修改法),在接受頁面上主要是靠BrowserManager獲取地址欄信息,并利用URLUtil截取參數。
b) 該方法雖然簡單但是確調用了2種語言,給編寫帶來一定的困難
發送頁面代碼(second.html):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
function kk():void{
var val:String = myparam.text;
ExternalInterface.call("function(){window.location.href='http://localhost:8080/send/page.html#param1="+val+"'}"); }
]]>
</mx:Script>
<mx:TextInput id="myparam"></mx:TextInput>
<mx:Button name="ok" click="kk()" x="185" label="提交"></mx:Button>
</mx:Application>
接收頁面代碼(page.html):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" >
<mx:Script>
<![CDATA[
import mx.managers.IBrowserManager;
import mx.managers.BrowserManager;
import mx.utils.URLUtil;
[Bindable]
var param:String;
function init():void
{
var bm:IBrowserManager = BrowserManager.getInstance();
bm.init();
var o:Object = URLUtil.stringToObject(bm.fragment,"&");
param = o.param1;
}
]]>
</mx:Script>
<mx:TextInput id="val" text="{param}">
</mx:TextInput>
</mx:Application>
二、 利用SharedObject(本地共享對象傳送)
a) 該對象類似于Cookie,將需要傳送的數據放在SharedObject對象中,而實際上在本機大致在(win2k和 win xp中,默認路徑為C:/Documents and Settings/username/Application Data/Macromedia/Flash Player/#SharedObjects (username為機器的用戶名))位置生成一個sol文件,該對象具有一個data屬性,只要將你要傳的數據按鍵值對放進去就好了,下次讀取的時候就在本地直接讀取即可
b) 遺憾的是,該對象要求你自己創建還要自己清除,并且在寫入數據時一定要強制刷新,否則數據無法希爾
發送頁面代碼(index.html):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
function s mit():void
{
var param:String = myparam.text;
//創建全局SharedObject,如果不用全局就去掉后面的"/",一旦去掉那么cookie只能被自己的Application使用,其他Applicaiton無法看見
//myparam是要求在本機創建一個叫cookie.sol的文件
var obj:SharedObject = SharedObject.getLocal("cookie","/");
obj.data.username=myparam.text;
obj.flush();
//調用URLReqst將跳轉到second.html頁面
var reqst:URLReqst =new URLReqst();
reqst.url="second.html";
navigateToURL(reqst);
}
]]>
</mx:Script>
<mx:TextInput id="myparam"></mx:TextInput>
<mx:Button label="提交" click="s mit()" x="177"></mx:Button>
</mx:Application>
接收頁面代碼(second.html):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
[Bindable]
var param:String;
function init():void
{
//在本地找到myparam.sol文件
var obj:SharedObject =SharedObject.getLocal("cookie","/");
//讀取前頁存入的數據
param = obj.data.username;
//用完了別忘了將myparam.sol文件刪除
obj.clear();
}
]]>
</mx:Script>
<mx:TextInput id="mypar" text="{param}"></mx:TextInput>
</mx:Application>