Specification: http://dev.w3.org/html5/postmsg/
Section: http://www.whatwg.org/specs/web-apps/current-work/complete.html#top

Comment:

ß@Ó×ö¾Í¦ÁË Logo
Google ËѤ
ËѤ ËѤ
Cross Frame: Åc²»Í¬¾WÓòµÄ Frame ×ö»¥Ó
´ËƪÎÄÕÂ×î½ü¸üÐÂrégé2010-10-07 11:52:56 Ä¿Ç°¹²ÓÐ1ƪÁôÑÔ
ÏàêPË»`£º

    * flash iframe ²»Í¬ html
    * ²»Í¬¾WÓò
    * Cross Document Messaging
    * flash Cross Frame
    * frame ÁíÒ»¾Wí
    * iframe ie8o·¨¿´µ½È«²¿Ò´°
    * javascript iframe ²»Í¬Ò´° ´æÈ¡

| Powered By SiteTag
JosephJ µÄÕÕƬ
êPì¶×÷Õß - JosephJ

D-Link ÓÑӿƼ¼¹¤³Ì¡£Ï²ºÃôÍâß\Ó¡¢2008 Äê 5
ÔÂÍê³É¡¸Åܲ½­hu¡¹¡£¦ì¶Ð¼¼Ðg¸ú³Ìʽ´aÓÐÖøÁÒµÄÆ«Ì¿ñ¡£
éºÎÒªÓò»Í¬¾WÓòµÄ Iframe£¿

ͨ³£Ý^¾ßÒÄ£µÄ¾WÕ¾£¬þ¿¼]ß@ӵݲȫÐÔî}£º®ÒªÊ¹Óõ½µÚÈý·½ËùÌṩµÄ
JavaScript r£¬µÃ·ÅÖÃÔÚÅcíÃæÍêÈ«²»Í¬¾WÓòµÄ Iframe ÖС£ÀýÈçÔÚ Yahoo!
¹¤×÷r£¬Éú»î+ Åc UrMap ºÏ×÷µÄµØD¾ÍÊÇ·ÅÔÚÁíÒ»¾WÓòµÄ Iframe
Öеġ£Èô²»ß@Ó×Ó×ö£¬UrMap ¾WÕ¾µÄ JavaScript ¿ÉÒÔëSr¸Z¸Ä Yahoo!
¾WíµÄÈÈÝ¡¢ÉõÖÁΣº¦µ½Ê¹ÓÃÕß¡£

Óò»Í¬¾WÓòµÄ Iframe
í·ÅÖõÚÈý·½³Ìʽ´aµÄÇéÐΣ¬ºÎíÕf¾ÍÊÇ£º¡¸ÎÒ²»ÐÅÈÎÄãµÄ³Ìʽ¡¢µ«ÎÒÐèÒªÄãµÄ³Ìʽ³É
éÎÒ¾WíÖеÄÒ»²¿·Ö¹¦ÄÜ¡¹£¨³ýÁË Iframe£¬ÁíÍâßÓÐ ADSafe¡¢Caja¡¢Flash
µÈ·½Ê½¿ÉÒÔ×öµ½£¬µ«ááÈýÕ߶¼ÓÐÒ»¶¨µÄéT¡££©
Same Origin Policy

¢µÚÈý·½¾Wí»ò³Ìʽ´a¡¢Óò»Í¬¾WÓòµÄ Iframe ·Åµ½ÄãµÄ¾WíÉÏÊÇÒ»¼þ·Ç³£ºÎµÄÊÂÇé
(<iframe src="xxx"></iframe>
ÈËÈ˶¼þÓÃ)¡£µ«î}ÔÚ춮ÉÕß¾WÓò²»Í¬r£¬JavaScript ÊÇ]ÓÐÞk·¨Í¸ß^ parent,
window.frames, top, opener µÈ·½Ê½´æÈ¡µÄ¡£ß@¾ÍÊÇËùÖ^ Same Origin Policy
µÄÏÞÖÆ¡£

²»ÄÜ»¥Ó£¬¾Íȱ·¦ÁËÐÔÅcªÓõÄCþ¡£ÀýÈçÌáµ½ Yahoo! Éú»î+ Åc UrMap
µÄºÏ×÷£¬Éú»î+ ß@ßþÏ£ÍûÔÚíÃæÉÏücßxÁË¡¸²Íd¡¹µÄßB½Yr¡¢¾ÍÓà AJAX
È¡µÃËÅ·þÆ÷µÄ²Íd½¾¶ÈÙYÓ¡¢÷ßfµ½·ÅÖõØD²»Í¬¾WÓòµÄ Iframe ÖС¢Iframe
½Óµ½ÓÏ¢áá¾ÍÒÔ UrMap API ÓB¸üоWíµØDÉϵÄ×ùËüc¡£¶øß@ÓµÄÐÐéÒ²þÒò Same
Origin Policy o·¨Ö±½Óß_³É¡£
Cross Document Messaging

WHATWG Ìá³öÁË Cross Document Messaging£¨Ò²ÊÇ HTML 5 µÄ Web
Messaging£©í½âQ´ËÒ»î}¡£ºÎíÕf£¬Äã¿ÉÒÔGÈκΠString µ½ÈκÎÄã¾WíÉϵÄ
Window Îï¼þ£¬µ«ÊÇÔ Window Îï¼þÒª²»ÒªÌÀí´Ë
String£¬¾ÍÊÇËü×Ô¼ºµÄÅÐࣨþÒ»ãÌṩíÔ´ Window µÄ domain£©¡£¹ Àý³Ìʽ´aÈçÏ£º

A ¾Wí (http://yahoo.com/a.html) ·ÅÖÃÁËÒ» name=urmap µÄ iframe£º

<iframe name="urmap" src="http://yahoomashup.com/urmap.html"></iframe>

A ¾WíÏëÒª÷ßf Hello World µÄÓÏ¢½o´Ë Iframe£º

<script>
/* ÎÒÊÇ yahoo.com */
window.frames['urmap'].postMessage("Hello World!", "*");
</script>

Iframe ÑeµÄ B ¾Wí (http://yahoomashup.com/urmap.html) ¿ÉÒÔß@Ó½Óµ½ÙYÁÏ£º

/* ÎÒÊÇ yahoomashup.com */
window.onmessage = function (e) {
    if (e.origin == "yahoo.com") { // ®í×Ô yahoo.com r...
	alert(e.data); // ï@ʾ "Hello World!"
    }
}

ºÃÏûÏ¢ÊÇÄ¿Ç°´ó¶àµµÄÖ÷Á÷gÓ[Æ÷Ö§Ô®´Ë·½Ê½£¬°üÀ¨ Firefox 3, Google Chrome,
Opera, IE8, IE9 ½Ô¿É¡£ÄÏûÏ¢tÊÇ IE6 Åc IE7 ]Óд˹¦ÄÜ¡£
Iframe In Iframe Hack

Èç¹û´ËÖ÷î}ÓÐÈκΠA-Grade
gÓ[Æ÷o·¨Ê¹Óã¬ÄÇÒ²]ß@ƪÎÄÕµıØÒª¡£Ö»Ìṩ°ëÌ××÷·¨¾ÍßdµôÁË£¨ß@Ò²ÊÇÎÒ¦´ó¶à
µ HTML 5 µÄм¼Ðg¸Ðµ½Àä¸ÐµÄÔ­Òò£¬IE[6-8] must die
Ò²Ö»ÊÇé_°lÕ߸οàϺ°Ë¬µÄ®aÎ¬FÊÀ½çÊDz»Äܲ»¹Ü IE µÄʹÓÃÕߵģ©ÆäÔçÔÚ 2007
Äê¾ÍÓÐһЩ·ÇÕýÒ Cross Frame
µÄ½â·¨¡£ß@ƪÎÄÕÂÊÇÄ¿Ç°½âÕf×îÔ¼µÄ×÷·¨£ºCross-Domain Communication with
IFrames

ÆäÔ­ÀíÏ஺Σ¬¾ÍÊÇ® A ¾WíÒª÷ßfÓÏ¢½o B ¾WíµÄ£¨ÔÚ Iframe
ÖУ©r£¬ÏÈÓB®aÉúÒ»Åc B ¾Wíͬ¾WÓòµÄ Iframe£¬´ËÓB Iframe 鵀 JavaScript
¼´¿ÉÀûÓà window.frames È¡µÃ B ¾Wí¼°×öÈκÎÐ޸ġ£ÁíÍâß¿É͸ß^ÐÞ¸ÄÉú³É Iframe
ÖÐµÄ URL hash (#)¡¢× JavaScript
¿ÉÒÔÒÀÕÕ²»Í¬¢µ×öÓ×÷¡£ß@×÷·¨µÄȱücÊÇ£¬Äã±ØíÁíÍâÔÚ½ÓÊն˵ľWÓò·ÅÖÃÒ»Ö§
Proxy µÄ HTML n¡¢×÷éÓB Iframe µÄ¾WÖ·¡£
YAHOO.util.CrossFrame º¯Ê½ì

ëmȻԭÀíºÜºÎ£¬µ«ÊÇÒªÄÜòÓÐϵ½yµÄÏͨ¡¢³Ìʽ¾ÍÊÇÒ»´óÌôðÁË¡¢ÖÐégµÄС¼¹Æä
ÊǺܶàµÄ¡£ÐҺà Yahoo! µÄÇ°¶Ë¹¤³Ì Julien Lecomte Óà YUI 2 ÁËÒ» CrossFrame
Utility¡£

YAHOO.util.CrossFrame.send(
    "http://www.y.com/proxy.html",
    "frames['mashup']",
    "message"
);

YAHOO.util.CrossFrame.onMessageEvent.subscribe(
    function (type, args, obj) {
	var message = args[0];
	var domain = args[1];
	// Do something with the incoming message...
    }
);

¿´µ½ÁË᣿ß@ßÆä¾ÍÊÇÓà YAHOO.util.CrossFrame.send() È¡´ú HTML5 µÄ
window.postMessage()¡¢ÓÃ YAHOO.util.CrossFrame.onMessageEvent È¡´ú
window.onmessage ʼþ¡£ÎÒ» API ½éÃæ¡¢ËùÓÐgÓ[Æ÷¶¼ÄÜÓã¡
Óà YUI 3 ¸Äé Y.CrossFrame

Òò鹫˾ÈÓõÄÊÇ YUI 3£¬ÓÐrégµÄԮȻϣÍû¸Ä¡£ÁíÍâ¾ÍÊÇ Julien
®rÄÇƪÎÄÕµÄrégücÊÇ 2007 Ä꣬postMessage Ö»ÓÐ Opera ÓÐ×÷£¬ËùÒÔ Julien
¦ì¶ Opera ÒÔÍâgÓ[Æ÷¶¼ñÓà Iframe in Iframe
µÄ×÷·¨£¬Ð§ÄܲîÉÏÔS¶à¡£Ò²Òò´ËÎÒ¸ÄéÒÔ postMessage éÖ÷¡¢Iframe in Iframe
éÝoµÄ×÷·¨Ý^ÓÐЧÂÊ¡£

Y.CrossFrame.postMessage(
    "Hello World!",	  // Òª÷ßfµÄÓÏ¢
    "frames['urmap']",	// Òª÷ßfµÄÒ´°£¨ÕÓà String£©
    {proxy:"http://yahoomashup.com/b.html"}  //  ²»Ö§Ô® postMessage
µÄgÓ[Æ÷þÓõ½µÄ proxy ¾WÖ·
);

Y.Global.on("crossframe:message", function (message, domain, url) {
alert(message);
});

Ä¿Ç°yÔ IE6, IE7, IE8, FF3, Chrome, Opera ¶¼]ÓÐî}£¨Ä£MÆ÷ÏñÊÇ IE Tester
o·¨Ê¹Óã©¡£Ï£Íû¦ÄúÓÐËùÍÖú :)
ÏàêPßB½Y

    * GitHub: yui3-crossframe
    * ¹ Àý³Ìʽ 1
    * ¹ Àý³Ìʽ 2



ǰһƪ£ºÔÚ 2010 COSCUP Ö÷Öv¡¸½¨Á¢Ç°¶Ëé_°lFê ¡¹ ááһƪ£ºHTML <dl/>, <dt/> Åc
<dd/> µÄÕ`ÓÃ
Comments

   1.
      Ô£²¨ 2010-10-08 16:54:51
      ѧϰÁË£¬³¢ÊÔÒ»ÏÂ

Leave a Reply
¿·Q£º ±ØÌî¡£
Email£º ·Ç±ØÌî¡£ÈôÌîé²»¹«é_Ú룬H¹©Õ¾éL¢¿¼ÂÀM¡£
ÈÈÝ£º ±ØÌî¡£ÏÞ 255 ×ÖÔªÒÔÈ¡£
Ëͳö
Facebook Comment


½jÎÒ RSS Feed
&#169; 2007 Ting-yu Chiang All rights reserved.
hemidemi_49fec64cc31b2b2c0dbfbcc5ce316dbf5e21fa24
MyBlogLog ClickTagging
29th Most Popular Outgoing Link

Posted from: 61.152.124.234