ASP.NET MVC #5
- فایلهای cshtml در تمام ادیتور بصری موجود قابل گشودن و ویرایش هستند.
- اما ... اکثر ادیتورهای بصری قادر نیستند با بسیاری از فریم ورکهای جدید CSS کار کنند؛ مانند بوت استرپ. طراحی و کار با آنها عموما بدون ادیتورهای بصری و به کمک استفاده از مرورگرها انجام میشود. Razor هم به همین نحو است. صفحه را تغییر داده و Save کنید. بعد مرورگر را Refresh کنید (نیازی به کامپایل مجدد نیست).
- صفحات ASP.NET، یک سری صفحات پویا هستند. نیاز به برقراری اتصالات خاصی بین بانک اطلاعاتی، کوئری استرینگها، مقادیر Post شده به صفحه و غیره، برای نمایش اطلاعات خاصی است. طراحهای بصری در یک چنین مواردی کارآمد نیستند و باید چرخهی کامل طول عمر صفحه در مرورگر طی شود.
- خیلی از مسایل توسط طراحهای بصری قابل پیاده سازی نیستند؛ برای مثال نوشتن یک if و else برای نمایش قسمتی از صفحه به کاربران اعتبارسنجی شده یا نمایش دادهها در یک حلقه.
- استفاده از T4MVC اجباری است. به هیچ عنوان نباید از رشتهها برای مشخص سازی نام کنترلرها یا اکشن متدها در قسمتهای مختلف برنامه استفاده شود.
- تا حد امکان از ViewBag ، ViewData و امثال آن استفاده نشده و به ازای هر View یک مدل متناظر (ViewModel) ایجاد شود.
- فایل پروژه برنامه توسط یک ادیتور متنی ویرایش شده و MvcBuildViews آن به True تنظیم شود.
- مدلهای متناظر با جداول بانک اطلاعاتی نباید مستقیما در Viewهای برنامه استفاده شوند.
- پوشه Models، از پروژه اصلی حذف شود. یک پروژه class library جدید به نام MyProjectName.Models برای نگهداری ViewModels ایجاد گردد.
- یک پروژه Class library دیگر به نام MyProjectName.DomainClasses برای نگهداری کلاسهای متناظر با جداول بانک اطلاعاتی ایجاد شود.
- از سیستم minification و bundling، برای یکی سازی اسکریپتها و CSSهای برنامه استفاده شود.
- قسمت custom errors فایل web.config برنامه به نحو صحیحی مقدار دهی شود.
- تمام فرمهای عمومی برنامه باید دارای AntiForgeryToken باشند.
- تمام فرمهای عمومی برنامه باید captcha داشته باشند.
- پوشههای Content و Scripts از سیستم مسیریابی تعریف شده در Global.asax خارج شوند.
- MvcHandler.DisableMvcResponseHeader = true به Application_Start اضافه شود.
- اگر فقط از Razor به عنوان ViewEngine استفاده میشود، در Application_Start، باید سایر ViewEngineهای مورد استفاده، حذف شوند.
- فیلتر پیش فرض مدیریت خطاها حذف و بجای آن از ELMAH استفاده شود.
- در web.config، مقادیر executionTimeout و maxRequestLength مرتبط با httpRuntime تنظیم شوند. همچنین enableVersionHeader آن نیز خاموش گردد.
- استفاده از سشنها کلا باید حذف شود. ماژول توکار آن از قسمت httpModules حذف گردد تا پردازش موازی صفحات فعال گردد. (سشن مربوط است به دوران ASP کلاسیک دهه نود و هیچ نیازی به استفاده از آن در MVC نیست)
- در هیچ کنترلری نباید جزئیات پیاده سازی متدی مشاهده شود. تمام پیاده سازیها باید به لایه سرویسهای مختلف برنامه منتقل و از طریق تزریق وابستگیها در دسترس باشند.
- اگر نیاز به مشخص سازی آدرسی در سایت است (خصوصا در اسکریپتها) باید از Url.Action استفاده شود و نه رشتهها.
- بهتر است بومی سازی برنامه از روز اول آن درنظر گرفته شده و تمام عبارات مورد استفاده در فایلهای Resource درج شوند.
- برای مدیریت سادهتر بستههای مورد استفاده (وابستگیهای برنامه) بهتر است از NuGet استفاده شود.
- از یک ماژول HTTP compression مستقل و با کیفیت استفاده شود (برای سازگاری بهتر با نگارشهای مختلف IIS).
- برای معرفی HTTP modules و سادگی تعریف و فعال سازی آنها در انواع و اقسام IISها بهتر است از کتابخانه WebActivator استفاده شود.
- امکان دوبار کلیک کردن بر روی تمام دکمهها نباید وجود داشته باشد.
- از هشهای ترکیبی استفاده شود. مستقیما از MD5 یا SHA1 استفاده نشود.
- با اسکریپتهای anti IE6,7، این مرورگرها به رحمت ایزدی واصل شوند.
- اگر کاربری JavaScript را در مرورگر خود غیرفعال کرد، نباید بتواند از سایت استفاده کند.
- کلیه تغییرات تنظیمات و محتوای مهم سایت باید برای مدیر سایت بلافاصله ایمیل شوند.
- یک سری کارهای متداول مانند تهیه فایلهای favicon.ico، apple-touch-icon-XxY.png، crossdomain.xml، robots.txt و sitemap.xml (ترجیحا پویا) فراموش نشود.
- در web.config و در زمان ارائه، compilation debug=false تنظیم شود.
- در تمام قسمتهایی که AlllowHtml فعال شده باید از پاکسازی Html دریافتی جهت مقابله با XSS مطمئن شد.
- جهت سهولت طراحی table less از یک فریم ورک CSS ایی استفاده شود.
- در تمام قسمتهایی که فایلی آپلود میشود باید بررسی شود فایلهای نا امن (فایلهای اجرایی ASP.NET) قابل آپلود نباشند.
- حین کار با بانکهای اطلاعاتی یا از ORM استفاده شود و یا از کوئریهای پارامتری.
- هر برنامه ASP.NET باید داری یک Application pool مجزا به همراه تنظیمات حافظه مشخصی باشد.
- تمام صفحات باید عنوان داشته باشند. به همین منظور مقدار دهی پیش فرض آن در فایل ViewStart صورت گیرد.
- در صفحه لاگین سایت، autocomplete خاموش شود.
- تمام deleteهای برنامه باید به HttpPost محدود شوند. تمام گزارشات و نمایش اطلاعات غیرعمومی برنامه به HttpGet محدود شوند.
- تعداد رفت و برگشتهای به بانک اطلاعاتی در یک صفحه توسط پروفایلرها بررسی شده و اطلاعات عمومی پرمصرف کش شوند.
- در هیچکدام از کلاسهای ASP.NET MVC نباید از HttpContext مستقیما استفاده شود. کلاس پایه جدید آن باید مورد استفاده قرار گیرد یا از Action Result صحیحی استفاده گردد.
- کش کردن فایلهای استاتیک درنظر گرفته شود.
- تمام درخواستهای jQuery Ajax باید بررسی شوند. آیا واقعا مرتبط هستند به سایت جاری و آیا واقعا Ajax ایی هستند.
یک نکته:
امکان تهیه قالبهای سفارشی VS.NET و لحاظ موارد فوق در آن جهت استفادههای بعدی نیز وجود دارد:
Create Reusable Project And Item Templates For Your Development Team
Write Templates for Visual Studio 2010
Building a Custom Project Wizard in Visual Studio .NET
ASP.NET MVC #3
تهیه پیشنیازهای شروع به کار با ASP.NET MVC
در زمان نگارش این مطلب، نگارش نهایی ASP.NET MVC 3 در دسترس است و همچنین نگارش بتای 4 آن نیز قابل دریافت و نصب میباشد. بنابراین فعلا اساس را بر مبنای نگارشی قرار خواهیم داد که در محیط کاری قابل استفاده باشد.
ASP.NET MVC 3 پس از ارائه Visual Studio 2010، منتشر شد و VS.NET به صورت پیش فرض به همراه ASP.NET MVC 2 است. سادهترین روش نصب ASP.NET MVC 3 بر روی VS 2010 استفاده از برنامه رایگانی است به نام Web Platform Installer. این برنامه را از این آدرس میتوان دریافت کرد: http://microsoft.com/web/downloads
پس از دریافت آن حداقل دو راه برای نصب ASP.NET MVC 3 وجود دارد. یا گزینهی نصب ASP.NET MVC 3 Tools Update را انتخاب کنید و یا سرویس پک یک VS 2010 را از طریق این برنامه یا جداگانه (بسته کامل و مستقل) دریافت و نصب نمائید. VS 2010 SP1 نیز به همراه ASP.NET MVC 3 است؛ همچنین IIS Express را که نسخه ساده شده IIS 7.5 مخصوص توسعه دهندهها است، میتوان با این نگارش یکپارچه کرد.
بنابراین به صورت خلاصه بهترین کار این است که سرویس پک یک VS 2010 را یکبار نصب نمائید. اگر این نصب از طریق برنامه Web Platform Installer باشد، به صورت خودکار IIS Express را هم انتخاب و نصب خواهد کرد. اگر فقط SP1 را به صورت مستقل دریافت کردهاید، حاوی IIS Express نیست و باید جداگانه آنرا دریافت و نصب نمائید (^). البته نصب IIS Express در اینجا یک گزینه اختیاری است و الزامی نیست.
مروری بر ساختار یک پروژه ASP.NET MVC
پس از نصب پیش نیازها، امکان انتخاب یک پروژه وب ASP.NET MVC 3 در VS 2010 میسر خواهد شد:
در اینجا گزینهی ASP.NET MVC 3 Web Application را انتخاب میکنیم. در صفحه بعدی که ظاهر میشود:
حالت Internet Application به همراه یک سری مدل و کنترلر از پیش نوشته شده جهت مدیریت ورود به سایت و ثبت نام در سایت است و حالت Empty تنها به همراه ساختار پیش فرض پوشههای یک پروژه ASP.NET MVC است.
فعلا جهت توضیحات اولیه بیشتر، گزینهی Internet Application و نوع View Engine را هم ASPX انتخاب میکنیم. کار View Engine، رندر یک View به شکل HTML و ارائه نهایی اطلاعات آن به کاربر است. این نوعهای متفاوت هم فقط در Syntax تفاوت دارند (به آن templating language هم گفته میشود). نوع ASPX همان Syntax متداول قدیمی ASP.NET را تداعی میکند و نوع Razor به صورت اختصاصی برای ASP.NET MVC تهیه شده است.
باید در نظر داشت که گزینه مرجح از نگارش 3 به بعد، Razor است (البته این هم سلیقهای است. اگر هیچکدام از این دو را هم نخواهید استفاده کنید مشکلی نیست! میشود کلا آن را عوض کرد). هدفم هم از انتخاب ASPX نمایش یک سری ریزه کاری است که شاید برای برنامه نویسهای ASP.NET Web forms جالب باشد. این موارد را در حالت انتخاب Razor به این وضوح مشاهده نخواهید کرد و محیط خیلی ساده شده است.
همانطور که ملاحظه میکنید این فریم ورک یک سری پوشه پیش فرض را توصیه میکند. بدیهی است که ضرورتی ندارد تا پوشه Models یا پوشه Controllers حتما در همین پروژه قرار داشته باشند؛ چون زمانیکه پروژه کامپایل شد، محل این پوشه بندیها آنچنان اهمیتی ندارد.
نکته جالب در این تصویر، فایل Site.Master است. بله، این فایل شبیه به همان فایل master page موجود در ASP.NET Web form است که قالب کلی سایت را به همراه داشته و سایر صفحات، قالب خود را از آن به ارث میبرند. حتی تگ runat=server هم به وضوح در این فایل، در چندین جای آن قابل مشاهده است. تنها تفاوت آن نداشتن فایل code behind است. asp:ContentPlaceHolder نیز در آن تعریف شده است. خلاصه این محیط جدید به معنای دور ریختن تمام آنچیزی که در Web forms وجود دارد نیست. برای نمونه اگر فایل ChangePassword.aspx موجود در پوشه Account را باز کنید، باز هم همان asp:Content معروف به همراه تگ runat=server قابل مشاهده است. برای مثال این محتوای صفحه Error.aspx پیش فرض آن است:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<System.Web.Mvc.HandleErrorInfo>" %>
<asp:Content ID="errorTitle" ContentPlaceHolderID="TitleContent" runat="server">
Error
</asp:Content>
<asp:Content ID="errorContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>
Sorry, an error occurred while processing your request.
</h2>
</asp:Content>
اگر از قسمت Inherits آن صرفنظر کنیم، «هیچ» تفاوتی با ASP.NET Web forms ندارد؛ علت هم به این بر میگردد که موتوری که Web forms و MVC از آن استفاده میکنند، یکی است. هر دو بر فراز موتور ASP.NET معنا پیدا خواهند کرد.
قرار دادهای پوشههای پیش فرض یک پروژه ASP.NET MVC
- پوشه Controllers حاوی کلاسهای کنترلری است که درخواستهای رسیده را مدیریت میکنند.
- پوشه Models حاوی کلاسهایی است که اشیاء تجاری و همچنین کار با اطلاعات را تعریف و مدیریت میکنند.
- در پوشه Views، فایلهای قالبهای رابط کاربری که مسئول ارائه خروجی به کاربر هستند قرار میگیرند. همچنین مطابق قرارداد دیگری، اگر نام کنترلر ما مثلا ProductController باشد (با توجه به اینکه نام کلاس آن هم مطابق قرارداد، مختوم به کلمه Controller است)، فایلهای Viewهای مرتبط با آن در پوشه Views/Product قرار خواهند گرفت.
- در پوشه Scripts، فایلهای جاوا اسکریپت مورد استفاده در سایت قرار خواهند گرفت.
- پوشه Content محل قرارگیری فایلهای CSS و تصاویر است.
- پوشه App_Data جایی است که فایلهایی با قابلیت read/write در آن قرار میگیرند (و باید دقت داشت که فقط همینجا هم باید قرار گیرند و گرنه این نوشتنها در مکانهای متفرقه، ممکن است سبب ری استارت شدن برنامه شوند:(^)).
22. استفاده از CSS Sprites
23. استفاده مطلوب از AJAX
24. حذف HTTP modules های اضافی
<httpModules> <remove name="OutputCache"/> <remove name="Session"/> <remove name="WindowsAuthentication"/> <remove name="FormsAuthentication"/> <remove name="PassportAuthentication"/> <remove name="RoleManager"/> <remove name="UrlAuthorization"/> <remove name="FileAuthorization"/> <remove name="AnonymousIdentification"/> <remove name="Profile"/> <remove name="ErrorHandlerModule"/> <remove name="ServiceModel"/> </httpModules>
انتخاب عناصر صفحه
1-انتخاب عناصر صفحه برای ایجاد تغییر
خوشبختانه jQuery یک مکانیزم بسیار قوی و قدرتمند ارایه کرده است که انتخاب هر عنصری از صفحه را به سادگی امکان پذیر میسازد. انتخاب کنندههای jQuery از ساختار مربوط به CSS استفاده میکنند، بنابراین ممکن است شما هم اکنون با تعداد زیادی از آنها آشنا باشید . در ادامه شمار بیشتر و قدرتمندتری خواهید آموخت.
برای درک بهتر شما از مطالب مربوط به بخش انتخاب کننده ها، یک مثال آماده مختص به این مبحث، در قالب یک صفحه اینترنتی، را در فایل صفحه کارگاهی قرار داده ایم، این فایل در ادرس chapter2/lab.selector.htm قابل دسترسی میباشد. این مثال از پیش آماده و کامل (نوشته شده توسط نویسنده کتاب)، این امکان را به شما میدهد تا با وارد کردن یک رشته، به عنوان پارامتر انتخاب کننده، در همان زمان عنصر انتخاب کننده در صفحه را رویت کنید. زمانی که این صفحه را اجرا میکنید تصویری مانند زیر ظاهر خواهد شد.
برای درک بهتر مطالب این سلسله پستها میتوانید فایلهای کتاب را از آدرس اصلی آن یا از این آدرس در همین سایت دانلود نمایید.
این صفحه سه پنجره مجزا دارد. در پنجره سمت چپ ، یک textBox و یک دکمه دیده میشود، که با وارد کردن یک انتخاب کننده در textBox و فشردن دکمه، عنصر مورد نظر در پنجره سمت راست انتخاب میشود. برای شروع در textBox عبارت li را بنویسید و دکمه Apply را کلیک کنید.
با انجام این عمل تصویر زیر باید خروجی شما باشد. میتوانید حالتهای دیگر را خودتان امتحان کنید.
1-1- استفاده از انتخاب کنندههای ابتدایی CSS
برنامه نویسان وب برای اعمال فرمتهای ظاهری گوناگون به بخشها و عناصر مختلف یک صفحه اینترنتی، از ایک راه بسیار ساده، در عین حال قدرتمند و کارا استفاده میکنند که در تمام مرورگرهای مختلف نیز جوابگو باشد. این انتخاب کنندهها عناصر را بر اساس نام شناسه آنها، نام کلاس و یا ساختار سلسله مراتبی موجود در صفحه انتخاب میکنند.
در زیر به معرفی چند نمونه از این انتخاب کنندههای ساده CSS میپردازیم:
- a : تمام عناصر <a> را انتخاب میکند.
- specialID# : عنصری را که دارای ID با عنوان specialID باشد انتخاب میکند.
- specialClass. : عناصری را که دارای کلاس specialClass هستند انتخاب میکند.
- a#specialID.specialClass : این عبارت عنصری را انخاب میکند که شناسه آن specialID باشد، به شرط آنکه این عنصر <a> باشد و دارای کلاس specialClass نیز باشد را انتخاب میکند.
- p a.specialClass: تمام عناصر لینک (<a>) را که دارای کلاس specialClass باشند و درون یک عنصر پاراگراف (<p>) قرار گرفته باشند را انتخاب میکند.
این انتخاب کنندهها شاید ساده به نظر برسند، اما در بسیاری از مواقع پاسخگوی ما میباشند؛ به علاوه آنه که با ادغام این انتخاب کنندههای ساده، ما میتوانیم انتخاب کنندههای پیچیدهتر و تخصصیتر ایجاد کنیم.
نکته مثبت در مورد انتخاب کنندههای CSS این است که از همین انتخاب کنندهها میتوانیم در jQuery نیز استفاده کنیم. برای این کار تنها کافیست انتخاب کننده مورد نظر را به تابع ()$ ارسال کنیم. در زیر یک نمونه را مشاهده میکنید:
$("p a.specialClass")
2-1- استفاده از انتخاب کنندههای فرزند (Child) ، نگهدارنده (Container) و صفت (Attribute)
برای انتخاب کنندههای پیشرفته تر، jQuery از جدیدترین مرورگرهایی که CSS را پشتیبانی میکنند، استفاده میکند که میتوان به Mozilla Firefox, Internet Explorer 7, Safariو سایر مرورگرهای پیشرفته (مدرن) اشاره کرد. این انتخاب کنندههای پیشرفته شما را قادر میسازند تا مستقیما فرزند یک عنصر را انتخاب کنید و یا از ساختار سلسله مراتبی عناصر صفحه، مستقیما به عنصر مورد نظر دسترسی داشته باشید و یا حتی تمام عناصری که یک صفت خاص را شامل میشوند، انتخاب کنید. گاهی اوقات انتخاب فرزندی از یک شی برای ما مطلوب است. برای مثال ممکن است ما به چند مورد از یک لیست احتیاج داشته باشیم، نه یک زیر مجموعه ای از آن لیست. به قطعه کد زیر که از صفحه کارگاهی این پست گرفته شده است دقت نمایید:
<ul> <li><a href="http://jquery.com">jQuery supports</a> <ul> <li><a href="css1">CSS1</a></li> <li><a href="css2">CSS2</a></li> <li><a href="css3">CSS3</a></li> <li>Basic XPath</li> </ul> </li> <li>jQuery also supports <ul> <li>Custom selectors</li> <li>Form selectors</li> </ul> </li> </ul>
راه حل مناسب برای انتخاب چنین حالتی استفاده از انتخاب فرزند می باشد که به این منظور Parent (والد) و Child (فرزند)، به وسیله یک کاراکتر < از یکدیگر جدا میشوند:
p > a
ul.myList > li > a
انتخاب کنندههای صفت نیز بسیار قدرتمند میباشند و ما را تواناتر میسازند، فرض کنید برای منظوری خاص قصد دارید به تمام لینکهای موجود در صفحه که به مکانی خارج از این وب سایت اشاره دارند، رفتاری را اضافه کنید (مثلا مانند همین سایت به کنار آنها یک آیکن اضافه نمایید) . فرض کنید این کد (کد موجود در مثال کارگاهی) را در صفحه خود دارید:
<li><a href="http://jquery.com">jQuery supports</a> <ul> <li><a href="css1">CSS1</a></li> <li><a href="css2">CSS2</a></li> <li><a href="css3">CSS3</a></li> <li>Basic XPath</li> </ul> </li>
a[href^=http://]
می توانید این کد را در صفحه کار گاهی تست کنید.
راهای دیگری برای استفاده از انتخاب کنندههای صفت وجود دارد.
form[method]
input[type=text]
دستور زیر مثالی دیگر برای بررسی یک مقدار بر اساس کاراکترهای نخست آن میباشد:
div[title^=my]
اما اگر بخواهیم تنها بر اساس کاراکترهای انتهایی انتخابی انجام دهیم، دستور مناسب چه خواهد بود؟ برای چنین منظوری مانند زیر عمل میکنیم:
a[href$=.pdf]
a[href*=jquery.com]
فراتر از خصوصیات، بعضی مواقع ما میخواهیم بررسی کنیم که آیا یک عنصر شامل عنصر دیگری هست یا خیر. در مثالهای قبلی فرض کنید ما میخواهیم بدانیم که آیا یک li شامل a هست یا خیر، jQuery با استفاده از انتخاب کنندههای Containerها این را پشتیبانی میکند:
li:has(a)
تصویر زیر انتخاب گرهایی را نشان میدهد که ما میتوانیم در jQuery استفاده نماییم.
انشالله در پستهای بعدی ادامه مباحث را بررسی خواهد شد.
EF Code First #11
اما در مورد UoW خوب باز هم طبق تجربه حتی با وجود DbContext (و Session در NH) فکر میکنم وجودش خیلی مفیده. مثلا تو برنامه های وب UoWم رو برپایه HttpModule قرار میدم و موقع Dispose شدن ماژول، تغییرات رو ذخیره میکنم.
در مورد M در MVC کاملا با آقای نصیری موافقم. این بحثو مدتی پیش با یه دوستی هم داشتیم که زیر بار نرفت. مثالی که اونجا زدم اینجا میزارم، فکر کنم مفیده.
فکر کنید شیئی به نام Member دارید با مثلا 20 پراپرتی. و این 20 خاصیت، در 5 ویوی مختلف نمایش داده میشن. یعنی یه ویو 6 تا، یه ویو 3 تا و همینطور تا آخر. خوب عاقلانه نیست که وقتی که به هر 20 خاصیت نیاز نداریم، همشو واکشی کنیم. پس دو تا راه داریم. یا باید اون 3 4 تا خاصیتی که نیاز داریم رو جداگانه (مثلا تو یه Tuple یا Anon یا حتی متغیرهای منحصر) واکشی کنیم و در اختیار ویو بذاریم؛ یا بیایم و یه ساختمون (class یا struct) تعریف کنیم مخصوص اون 3 4 تا پراپرتی. خوب من روش دوم رو ترجیح میدم که همون view-model های منو میسازه. یا نمایی رو در نظر بگیرید که لازمه از ترکیبی از دو یا چند مدل داده استفاده کنه. تو همون مثال Member، فرض کنید نمایی هست که نام کاربری و نام و نام خانوادگی رو از Member و تعداد ارسال ها رو از Comments و آخرین فعالیت رو از MemberActivitis و آدرس ایمیل عمومی رو از AuthTokens میخونه! چه میکنید؟
ضمنا به فلسفه وجودی مثلا AutoMapper هم فکر کنیم.
OutputCache در ASP.NET MVC
کمی شوخی با IE6
اخیرا عدهای از همکاران عنوان میکنند که "لطفا" از IE6 استفاده نکنید، یا یک پیغام "لطیف" را به کاربران IE6 نمایش میدهند و امثال آن. نظر شما در مورد استفاده از روشهای زیر چیست؟ :-)
مثال زیر را در نظر بگیرید:
<html>
<head>
<title>crash-1</title>
<style type="text/css">
* {position: relative;}
</style>
</head>
<body>
<table><input></table>
</body>
</html>
<style>*{position:relative}</style><table><input></table>
<html>
<head>
<title>crash-2</title>
<script type="text/javascript">for (x in document.write) { document.write(x);}</script>
</head>
<body>
Test-2
</body>
</html>
مثال 3:
این مورد کمی خطرناک است و سبب هنگ کل سیستم عامل خواهد شد و همچنین مصرف شدید حافظه تا حد ممکن.
<html>
<head>
<title>crash-3</title>
<style type="text/css">
:link:hover {
color: #f00;
}
:link .images {
width: 300px;
display: none;
}
:link:hover .images {
position: absolute;
top: 10px;
left: 230px;
display: block;
}
</style>
</head>
<body>
<a href="#">Line 1
<div class="images">
Line 2: HOVERING OVER THIS LINE MAY CRASH THE BROWSER! <br>Line 3: What is happening
here?</div>
</a>
</body>
</html>
این مورد نیز سبب هنگ سیستم عامل میشود:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<style type="text/css">
a {
padding:2px;
white-space:nowrap;
position:relative;
}
</style>
</head>
<body>
<div>
<a href="#">Option 1</a>
<a href="#">Option 2</a>
</div>
</body>
</html>