jQuery:¶¯Ì¬¸Ä±ähtml±íµ¥µÄÄ¿±êÒ³£¨Target£©
¿´µ½Rick StrahlµÄ×îв©¿ÍChanging an HTML Form¡¯s Target with jQuery£¬¶ÁÍêÖ®ºó¸Ð¾õÎÄÖиø³öµÄ½â¾ö·½°¸ºÜ¼òµ¥ºÜʵÓ᣽è¼øÔÎÄ£¬¶Ï¶ÏÐøÐøÖØÐÂÕûÀíС½áһϣ¬±¾ÎÄ×îºóÌṩһ¸ö¼òµ¥demoÏÂÔØ£¬Ï£Íû¶ÔÄúÒ²ÓаïÖú¡£
1¡¢ÎÊÌâÀ´Ô´
¡°Ò³ÃæÖÐÓÐÒ»¸öform£¬ÓÐЩ¸ösubmit°´Å¥»òÕßÁ´½Ó°´Å¥ÐèÒªµã»÷ºó´ò¿ªÐÂÒ³Ãæ¡£ÎÒÃÇÈçºÎÈÃÕâЩ¸ö°´Å¥½«±íµ¥ÐÅÏ¢Ìá½»µ½ÕýÈ·µÄ¶ÔÓ¦Ò³Ã棿¡±
Õâ¸öÎÊÌâ¿´ÉÏÈ¥ºÜ¼òµ¥¡£
ÊìϤasp.net¿ª·¢µÄ¶¼Ó¦¸ÃºÜÇå³þ£¬Í¨¹ýasp.net webform£¬ÎÒÃÇ¿ÉÒÔ¶Ôrunat=¡±server¡±µÄform½øÐÐÊôÐÔÉèÖãº
<form method="post" action="default.aspx" id="form1">
ÈçÄãËùÖª£¬methodÊôÐÔÊÇhttpÊý¾Ý´«Êä·½·¨£¬actionÊôÐÔÊÇÒªÌá½»µÄÄ¿±êÒ³£¬ÖÁÓÚ´ò¿ªÐÂÒ³Ã棬ÉèÖÃtargetΪ_blank¼´¿É¡£
¶ÔÓÚͨ³£µÄÒ³Ãæ½»»¥£¬Ò»¸ö»ò¶à¸ö°´Å¥Ìá½»Ò»¸öÏàͬµÄ±íµ¥ÕâÑù×öûÓÐÎÊÌ⣬¿ÉÊÇÈç¹û°´Å¥ÐèÒªpostµÄÒ³Ãæ²»¾¡Ïàͬ£¬Õâ¸ö·½·¨¾ÍÏÔµÃÎÞÄÜΪÁ¦¡£ÒòΪÕâÖÖ½â¾ö·½·¨ÊÇ¡°È«¾Ö¡±µÄ£¬ÉèÖÃÒ»´Î£¬Ó°ÏìËùÓÐ±íµ¥Ìá½»ÔªËØ¡£
2¡¢runat=serverµÄform
µ½ÕâÀҲÐíÓÐÈ˻ᡰÐÒÔÖÀÖ»ö¡±µØ˵ÕⶼÊÇweb formµÄform»úÖƲ»ºÃ£¬Ò»¸öÒ³ÃæÖ»ÄÜÓÐÒ»¸örunat=serverµÄform¡£ÎÒÃÇÍêÈ«¿ÉÒÔÔÚÒ»¸öÒ³ÃæÖжඨÒ弸¸öform£¬¶ÔÓÚ²»Í¬µÄÌá½»°´ Å¥£¬ÎÒÃǸøËüÉèÖò»Í¬µÄform(¼´·Ö¸îÌá½»°´Å¥µ½²»Í¬µÄ±íµ¥)£¬ÕâÑù²»¾Í½â¾öÎÊÌâÁËÂð£¨ÐÂÀË¡¢ÍøÒ׺ÍËѺüµÈºÜ¶àÒ³Ã棬´ò¿ªÒ»¸öÍøÒ³²¢²é¿´Ô´Âë¿ÉÒÔ¿´µ½ºÜ ¶àform£¬ÎÒ¹À¼Æ¶¼ÊÇÕâôÓõģ©£¿
µ«ÊÇ£¬Õâ²»ÊÇweb form¶ÀÓеġ°´í¡±£¬ÆäËû¿ª·¢¿ò¼ÜÒ²ÓÐÀàËÆÎÊÌ⣺
Although this discussion uses ASP.NET WebForms as an example, realistically this is a general HTML problem although likely more common in WebForms due to the single form metaphor it uses. In ASP.NET MVC for example you'd have more options by breaking out each button into separate forms with its own distinct target tag. However, even with that option it's not always possible to break up forms - for example if multiple targets are required but all targets require the same form data to the be posted.
ÔÎĵÄÆÀÂÛÖÐÒ»¸ö¸çÃǻظ´Ëµ£º
¡°Good post, as always, but have you noticed that literally everything you want to do with webforms requires a hack or workaround? It's always some rudimentary thing that is easy to do in any other web platform or framework, but the webforms abstraction always rears it's ugly head. Bleh, the further I get away from webforms, the more productive I have become.¡±
¡±ugly¡°Ò»´ÊÓõÄÕæÊÇÐÎÏóÇÒÏÕ¶ñ¡£ºÃÔÚRick¼°Ê±»Ø¸´Ëµ£º
# re: Changing an HTML Form's Target with jQuery
by Rick StrahlFebruary 03, 2011 @ 12:00 am @Jeff - this
isn't specific to WebForms as I pointed out at the top of the page. The
same applies to MVC or any other framework that has multiple POSTable
options for submission. Admittedly, with WebForms your options are more
limited as you can't easily add additional forms, but when you need to
submit form variables to multiple target actions there are no choices
regardless of platform...
»¹ÓУ¬ÎҸоõ»Ø¸´ÕßJeffÕâ¸öÃû×ÖͦÓÐϲ¸ÐµÄ¡£
3¡¢¼òµ¥ÊµÓõĽâ¾ö·½°¸
£¨1£©¡¢Ö±½ÓʹÓÃlinkbutton»òÕßÁ´½Ó¿Ø¼þ£¿
ͨ³£Çé¿öÏ£¬ÎÒÃǺÜÈÝÒ×Ïëµ½ÓÃÏֳɵÄlink¿Ø¼þµÄÊôÐÔÀ´ÊµÏÖÒ³ÃæÌá½»¡£±ÈÈçLinkButton°É£º
<asp:LinkButton runat="server" ID="btnNewTarget" Text="New Target" target="_blank" OnClick="bnNewTarget_Click" />
ËäÈ»LinkButtonûÓÐTargetÊôÐÔ£¬µ«ÊÇÏñÉÏÃæÄÇÑùÉèÖÃҲûÓÐÎÊÌâ¡£
µ«ÊÇ£¬×îŵľÍÊÇÕâ¸öµ«ÊÇ¡£Ôڲ鿴Éú³ÉµÄhtmlÔ´ÂëµÄʱºò£º
<a id="btnNewTarget" target="_blank" href="[removed]__doPostBack('btnNewTarget','')">New Target</a>
ÎÒÃÇ·¢ÏÖÉú³ÉµÄhtmlÔ´ÂëÀïaÔªËصÄhrefÊôÐÔÒѾ±»ÉèÖÃÁËÒ»¶ÎÈÃÈËÑÛÊìµÄ¿ØÖƻط¢½Å±¾¡£¾ÍÊÇÕâÒ»¶Î½Å±¾£¬ÈÃÎÒÃÇÌá½»Êý¾Ýµ½Ð´°¿ÚµÄÄ¿µÄÂä¿Õ¡£ÎªÊ²Ã´ÄØ£¿
What happens with a target tag is that before the JavaScript actually executes a new window is opened and the focus shifts to the new window. The new window of course is empty and has no __doPostBack() function nor access to the old document. So when you click the link a new window opens but the window remains blank without content - no server postback actually occurs.
ÔÎĽâÊ͵Ļ¹ËãÇå³þ¼òµ¥£¬good£¬fabulous£¬excellect¡´ÊÇî¡£
£¨2£©¡¢ÎªÕâЩ¸ö°´Å¥ÉèÖÃformµÄTarget°É£¡
ͨ¹ýÏÂÃæµÄ½Å±¾£¬¿ÉÒÔÇáËÉʵÏÖÎÒÃǵÄÔ¤¶¨¹¦ÄÜ£º
$("#btnButtonNewTarget,#btnNewTarget").click(function () { $("form").attr("target", "_blank"); });
¶ÔÓÚͬһ¸öÒ³Ãæpost£¨Ê¾ÀýÖÐÊÇdefault.aspxÒ³Ã棩£¬ËüºÍ£¨1£©µÄЧ¹û½ØÈ»²»Í¬¡£¿ÉÄÜÄúÏ°¹ßÒªÎÊΪʲô£¬ÔÎÄÊÇÕâÑù½âÊ͵ģº
So why does this work where the target attribute did not? The difference here is that the script fires BEFORE the target is changed to the new window. When you put a target
attribute on a link or form the target is changed as the very first
thing before the link actually executes. IOW, the link literally
executes in the new window when it's done this way.
By attaching a
click handler, though we're not navigating yet so all the operations the
script code performs (ie. __doPostBack()) and the collection of Form
variables to post to the server all occurs in the current page. By
changing the target from within script code the target change fires as
part of the form submission process which means it runs in the correct
context of the current page. IOW - the input for the POST is from
the current page, but the output is routed to a new window/frame. Just
what we want in this scenario.
¿´ÔÎÄÕâÀï¿ÉÄÜÓеãÈÆÈË£¬½âÊÍÌ«¶à£¬Óеã×¥²»×¡Öص㡣ÎÒÈÏΪ¹Ø¼üÒªÀí½âÔÎÄÖеġ°±íµ¥Ìá½»½ø³Ì£¨form submission process£©¡±¡£µã»÷°´Å¥µÄʱºò£¬ÔÚµ±Ç°Ò³Ãæͨ¹ý½Å±¾¸Ä±ä±íµ¥µÄTarget£¬ÕâÖ»ÊÇ±íµ¥Ìá½»½ø³ÌµÄÒ»²¿·Ö£¨By changing the target from within script code the target change fires as part of the form submission process£©¡£
ÄÇôÕæÕýµÄ¡°±íµ¥Ìá½»½ø³Ì¡±·¢ÉúÁËʲôÄØ£¿Ë³×ÅÔÎĵÄÒâ˼£¬¿´ÉÏÈ¥ºÃÏñÊÇÐÂÒ³Ãæ´ò¿ª£¬Ç°Ò»Ò³µÄ±íµ¥Êý¾ÝÌá½»µ½Ð´ò¿ªµÄÒ³Ã棬òËÆÊÇÇ°Ò»Ò³ £¨current page£©µÄ_doPostPackº¯Êý¡°Ìø¡±µ½µ±Ç°Ð´ò¿ªµÄÒ³Ã棨Ҳ½Ðcurrent page£©´¥·¢ClickHandler¡¡²»¾ÍÊÇ¡°current page¡±µÄÖû»Â𣿿ÉÄÜÎÒ×Ô¼ºµÄÀí½âÏÖÔÚ»¹ÓÐÆ«²î£¬Ó¢ÓïˮƽϽµµÃÁîÈË×¥¿ñ£¬±ØÐëÒª²¹²¹ÁË¡£Èç¹ûÄúÓиüºÏÊʵĺÃÀí½âµÄ½âÊÍ˵Ã÷£¬Çë²»Áߴͽ̡£
¶à˵һ¾ä£¬µã»÷Ç°Ò»¸öÒ³Ã棬ÔÚдò¿ªµÄÒ³Ãæ´¥·¢Ê¼þ¡£ÎÒkao£¬Õâ¶àÏñ½ºþÖд«ËµÒѾõÄǬÀ¤´óŲÒÆ°¡£¿
By the way£¬ÎÒÃÇ»¹¿ÉÒÔÔÚ²»Í¬µÄÐÂÒ³ÃæÖÐpost´«²Î£¬Äú¿ÉÒÔ½«demoÖеÄDefaultÒ³ÃæµÄformµÄactionÉèÖÃΪ ¡°TargetPage.aspx¡±ÊÔһϡ£ÆäʵÎÒ×Ô¼ºÔÚ¿ª·¢ÖÐÒ²Ôø¾Åöµ½¹ýRickÎÄÖÐËùÊöµÄÀàËÆÎÊÌâ¡£ÎҵĽâ¾ö·½·¨Í¨³£¶¼ÊǶÔÓÚijһ¸ö°´Å¥£¬Ö±½Óͨ¹ý javascriptд¸öº¯Êý£ºÏÈÕÒµ½Òª²Ù×÷µÄform£¬ÐÞ¸Äaction£¬È»ºóµ÷ÓÃformµÄsubmit·½·¨´ò¿ªÐ´°¿Ú£¬Õæ²»ÈçRickÔÎÄÖеÄÀ´µÃ ¼ò½à¡£
demoÏÂÔØ£º SimpleWebApp
ÍƼöÐÅÏ¢
- jqueryʵÏÖÍøվͼƬÀÁ¼ÓÔØ´úÂë
- jQuery Tooltips²å¼þ
- jQueryµÄ.bind()¡¢.live()ºÍ.delegate(....
- [Ô´´]·ÂGoogle Reader¡¢ÐÂÀË΢²©¡¢ÌÚѶ΢²©µ....
- Ä㲻ϲ»¶»ðºü£¬µ«ÓÖϲ»¶firebug£¬ÄǾ͸úÎÒÒ»ÆðÀ´ÔÚIEÉÏ....
- ¸ù¾ÝÏÔʾÆ÷·Ö±æÂʵ÷ÕûÒ³ÃæÏÔʾµÄJavascript½Å±¾
- jQuery дµÄ·ÂÐÂÀË΢²© ÏòϹö¶¯Ð§¹û¡¾×ªÔØ¡¿
- ͨÓõÄJqueryÑ¡ÔñÆ÷
- jQuery ½áºÏ Json Ìá½»Êý¾Ýµ½Webservice£¬....
- ×ÔÖÆjQueryÖÇÄÜÌáʾ²å¼þһö
ÈÈÃÅÐÅÏ¢
- nohup: redirecting stderr to stdou....
- ʹÓÃlog_formatΪNginx·þÎñÆ÷ÉèÖøüÏêϸµÄÈÕÖ¾¸ñʽ
- jquery easyUI--dataGrid-Json
- [Ô´´]·ÂGoogle Reader¡¢ÐÂÀË΢²©¡¢ÌÚѶ΢²©µ....
- ÀûÓÃKeepalived+mysql¹¹½¨¸ß¿ÉÓÃMySQLË«Ö÷×Ô¶....
- Nginx+keepalivedʵÏÖ¸ºÔؾùºâºÍË«»úÈȱ¸¸ß¿ÉÓÃ
- jqueryʵÏÖÒ³Ãæ¼ÓÔؽø¶ÈÌõ
- Rolling cURL: PHP²¢·¢×î¼Ñʵ¼ù
- codeigniter ·ÓÉÖÕ¼«ÓÅ»¯(url rewrite)
- linuxÏÂÉèÖÃsshÎÞÃÜÂëµÇ¼
×î½ü¸üÐÂ
- js»ñÈ¡srcÖд«µÝµÄ²ÎÊý
- jqueryʵÏÖÍøվͼƬÀÁ¼ÓÔØ´úÂë
- ÈÃä¯ÀÀÆ÷ÆÁ±ÎµôJavaScriptµÄ³ö´íÌáʾ
- github²»ÄܼÓÔØcss¡¢js½â¾ö°ì·¨
- ÎÒÖªµÀµÄJavaScript -- Éè¼Æģʽ(ÇŽÓ)Ó¦ÓÃÖ® ¨C ....
- 15¸öÖµµÃ¿ª·¢ÈËÔ±¹Ø×¢µÄjQuery¿ª·¢¼¼ÇɺÍÐĵÃ
- dz̸JavascriptÃæÏò¶ÔÏó±à³Ì
- JS¼òµ¥¶¯»·â×°
- JavaScript³õѧÕßӦעÒâµÄÆ߸öϸ½Ú
- jQuery Tooltips²å¼þ
ÆÀÂÛ