`. So, popups is not something we use everyday.
+از زمانهای بسیار قدیم، Popupها وجود دارند. ایدهی اولیه این بود که بتوان یک محتوای دیگر را بدون بستن پنجرهی اصلی نمایش داد. در حال حاضر، راههای دیگری برای این کار وجود دارد: میتوانیم داده را به صورت پویا با [fetch](info:fetch) بارگیری کنیم و آن را در یک `
` که به صورت پویا ایجاد شده است نمایش دهیم. بنابراین، popupها چیزهایی نیستند که ما هر روز از آنها استفاده کنیم.
-Also, popups are tricky on mobile devices, that don't show multiple windows simultaneously.
+همچنین، popupها در دستگاههای موبایل که چند پنجره را به صورت همزمان نشان نمیدهند کمی مشکل هستند.
-Still, there are tasks where popups are still used, e.g. for OAuth authorization (login with Google/Facebook/...), because:
+با این حال، کارهایی وجود دارند که popupها هنوز در آنها استفاده میشوند. برای مثال، برای مجوز OAuth (lgin با Google/Facebook/...) چون که:
-1. A popup is a separate window which has its own independent JavaScript environment. So opening a popup from a third-party, non-trusted site is safe.
-2. It's very easy to open a popup.
-3. A popup can navigate (change URL) and send messages to the opener window.
+1. یک popup پنجرهای جدا است که محیط JavaScript جداگانهی خود را دارد. بنابراین باز کردن یک popup از یک سایت سوم غیر قابل اطمینان، امن است.
+2. باز کردن یک popup بسیار ساده است.
+3. یک popup میتواند پیمایش کند (آدرس سایت را تغییر دهد) و به پنجرهی بازکننده پیام بفرستد.
-## Popup blocking
+## مسدود کردن popup
-In the past, evil sites abused popups a lot. A bad page could open tons of popup windows with ads. So now most browsers try to block popups and protect the user.
+در گذشته، سایتهای خبیث بسیار از popup سواستفاده میکردند. یک صفحه میتوانست تعداد زیادی popup با تبلیغات باز کند. بنابراین امروزه، اکثر مرورگرها تلاش میکنند که popup را مسدود کنند و از کاربر در برابر آنها محافظت کنند.
-**Most browsers block popups if they are called outside of user-triggered event handlers like `onclick`.**
+**اکثر مرورگرها، اگر فراخوانی popupها خارج از event handlerهای ایجاد شده توسط کاربر صورت بگیرد، آنها را مسدود میکنند.**
-For example:
+برای مثال:
```js
-// popup blocked
+// popup مسدود شده است
window.open('https://javascript.info');
-// popup allowed
+// popup اجازه داده شده است
button.onclick = () => {
window.open('https://javascript.info');
};
```
-This way users are somewhat protected from unwanted popups, but the functionality is not disabled totally.
+به این ترتیب، کاربرها تا حدودی از popupهای ناخواسته محافظت میشوند، اما عملکرد به طور کامل غیرفعال نمیشود.
## window.open
-The syntax to open a popup is: `window.open(url, name, params)`:
+برای باز کردن یک popup از syntax روبهرو استفاده میشود: `window.open(url, name, params)`:
url
-: An URL to load into the new window.
+: یک URL برای بارگیری در پنجره جدید.
name
-: A name of the new window. Each window has a `window.name`, and here we can specify which window to use for the popup. If there's already a window with such name -- the given URL opens in it, otherwise a new window is opened.
+: یک name پنجرهی جدید. هر پنجره یک `window.name` دارد و اینجا میتوانیم مشخص کنیم که از کدام پنجره به عنوان popup استفاده کنیم. اگر قبلا پنجرهای با این نام وجود داشته باشد، -- URL داده شده در آن باز میشود، در غیر این صورت، یک پنجرهی جدید باز میشود.
params
-: The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: `width=200,height=100`.
+: رشتهی configuration برای پنجرهی جدید. این شامل تنظیماتی است که با comma مشخص میشوند. هیچ spaceای نباید در params وجود داشته باشد، برای مثال: `width=200,height=100`
-Settings for `params`:
+تنظیمات برای `params`:
- Position:
- - `left/top` (numeric) -- coordinates of the window top-left corner on the screen. There is a limitation: a new window cannot be positioned offscreen.
- - `width/height` (numeric) -- width and height of a new window. There is a limit on minimal width/height, so it's impossible to create an invisible window.
-- Window features:
- - `menubar` (yes/no) -- shows or hides the browser menu on the new window.
- - `toolbar` (yes/no) -- shows or hides the browser navigation bar (back, forward, reload etc) on the new window.
- - `location` (yes/no) -- shows or hides the URL field in the new window. FF and IE don't allow to hide it by default.
- - `status` (yes/no) -- shows or hides the status bar. Again, most browsers force it to show.
- - `resizable` (yes/no) -- allows to disable the resize for the new window. Not recommended.
- - `scrollbars` (yes/no) -- allows to disable the scrollbars for the new window. Not recommended.
+ - `چپ/بالا`(عددی) - مختصات گوشهی سمت چپ بالای پنجره در صفحه. یک محدودیت وجود دارد: یک پنجرهی جدید را نمیتوان خارج صفحه قرار داد.
+ - `عرض/ارتفاع`(عددی) - عرض و ارتفاع یک پنجرهی جدید. در حداقل عرض/ارتفاع یک محدودیت وجود دارد. بنابرین غیرممکن است که یک پنجرهی غیرقابل دیدن ایجاد کرد.
+- ویژگیهای پنجره:
+ - `menubar` (بله/خیر) -- .منوی مرورگر را در پنجره جدید نشان میدهد یا پنهان میکند
+ - `toolbar` (بله/خیر) -- .نوار پیمایش مرورگر (به عقب، جلو، بارگذاری مجدد و ...) را در پنجره جدید نشان میدهد یا پنهان میکند
+ - `location` (بله/خیر) -- .به طور پیش فرض اجازه مخفی کردن آن را نمیدهند IE و FF را در پنجرهی جدید نشان میدهد یا پنهان میکند URL فیلد
+ - `status` (بله/خیر) -- .را نشان میدهد یا پنهان میکند. باز هم، اکثر مرورگرها آن را مجبور به نمایش میکنند status bar
+ - `resizable` (بله/خیر) -- .اجازه میدهد تا تغییر اندازه را برای پنجره جدید غیرفعال کنید. توصیه نمیشود
+ - `scrollbars` (بله/خیر) -- .اجازه میدهد تا نوارهای اسکرول را برای پنجره جدید غیرفعال کنید. توصیه نمیشود.
-There is also a number of less supported browser-specific features, which are usually not used. Check
window.open in MDN for examples.
+همجنین، تعدادی ویژگی خاص مرورگر وجود دارند که کمتر پشتیبانی میشوند که معمولا از آنها استفاده نمیشود. برای مثال،
window.open در MDN را بررسی کنید.
-## Example: a minimalistic window
+## مثال: یک پنجرهی minimalistic
-Let's open a window with minimal set of features, just to see which of them browser allows to disable:
+بیایید یک پنجره با حداقل مجموعهای ویژگیها باز کنیم، فقط برای آن که ببینیم مرورگر کدام یکی از آنها را غیرفعال میکند:
```js run
let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
@@ -78,9 +78,9 @@ width=0,height=0,left=-1000,top=-1000`;
open('/', 'test', params);
```
-Here most "window features" are disabled and window is positioned offscreen. Run it and see what really happens. Most browsers "fix" odd things like zero `width/height` and offscreen `left/top`. For instance, Chrome open such a window with full width/height, so that it occupies the full screen.
+اینجا اکثر "ویژگیهای پنجره" غیرفعال شدهاند و پنجره خارج صفحه قرار میگیرد. آن را اجرا کنید و ببینید واقعا چه اتفاقی میافتد. اکثر مرورگرها موارد عجیب و غریب مثل `width/height` صفر و `left/top` خارج از صفحه را درست میکنند. برای مثال، chrome همچین پنجرهای را با عرض/ارتفاع کامل باز میکند تا تمام صفحه را اشغال کند.
-Let's add normal positioning options and reasonable `width`, `height`, `left`, `top` coordinates:
+بیایید گزینههای موقعیتیابی عادی و مختصات `عرض`، `ارتفاع`، `چپ`، `بالا` را اضافه کنیم:
```js run
let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
@@ -89,20 +89,20 @@ width=600,height=300,left=100,top=100`;
open('/', 'test', params);
```
-Most browsers show the example above as required.
+اکثر مرورگرها مثال بالا را در صورت لزوم نشان می دهند.
-Rules for omitted settings:
+قوانین مربوط به تنظیمات حذف شده:
-- If there is no 3rd argument in the `open` call, or it is empty, then the default window parameters are used.
-- If there is a string of params, but some `yes/no` features are omitted, then the omitted features assumed to have `no` value. So if you specify params, make sure you explicitly set all required features to yes.
-- If there is no `left/top` in params, then the browser tries to open a new window near the last opened window.
-- If there is no `width/height`, then the new window will be the same size as the last opened.
+- اگر هیچ آرگومان سومی در فراخوانی `open` نیست یا خالی است، آنگاه پارامترهای پیشفرض پنجره استفاده میشوند.
+- اگر رشتهای از params وجود دارد اما بعضی از ویژگیهای `yes/no` حذف شدهاند، آنگاه فرض میشود که ویژگیهای حذفشده مقدار `no` را دارند. اگر پارامترها را مشخص میکنید،مطمئن شوید که تمام ویژگیهای مورد نیاز به صراحت روی yes تنظیم شدهاند.
+- اگر هیچ `left/top`ای در params وجود ندارد، مرورگر تلاش میکند که پنجرهای جدید را نزدیک آخرین پنجرهی باز شده، باز کند.
+- اگر هیچ `width/height`ای وجود ندارد، پنجرهی جدید همان اندازهی آخرین پنجرهی باز شده را خواهد داشت.
-## Accessing popup from window
+## دسترسی به popup از طریق پنجره
-The `open` call returns a reference to the new window. It can be used to manipulate its properties, change location and even more.
+فراخوانی `open` ارجاعی به پنجرهی جدید را برمیگرداند. از آن میتوان برای دستکاری کردن propertyها، تغییر دادن location و حتی بیشتر استفاده کرد.
-In this example, we generate popup content from JavaScript:
+در این مثال، ما از JavaScript محتوای popup را تولید میکنیم.
```js
let newWin = window.open("about:blank", "hello", "width=200,height=200");
@@ -110,13 +110,13 @@ let newWin = window.open("about:blank", "hello", "width=200,height=200");
newWin.document.write("Hello, world!");
```
-And here we modify the contents after loading:
+و اینجا بعد از load کردن، محتوا را دستکاری میکنیم.
```js run
let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();
-alert(newWindow.location.href); // (*) about:blank, loading hasn't started yet
+alert(newWindow.location.href); // (*) about:blank, هنوز شروع نشده است loading
newWindow.onload = function() {
let html = `
Welcome!
`;
@@ -126,19 +126,19 @@ newWindow.onload = function() {
};
```
-Please note: immediately after `window.open`, the new window isn't loaded yet. That's demonstrated by `alert` in line `(*)`. So we wait for `onload` to modify it. We could also use `DOMContentLoaded` handler for `newWin.document`.
+لطفا توجه داشته باشید: بلافاصله بعد از `window.open` پنجرهی جدید هنوز load نشده است. آن، در خط `(*)` با `alert` نشان داده میشود. پس صبر میکنیم تا `onload` آن را اصلاح کند. همچنین برای `newWin.document` میتوانیم از `DOMContentLoaded` handler استفاده کنیم.
-```warn header="Same origin policy"
-Windows may freely access content of each other only if they come from the same origin (the same protocol://domain:port).
+```warn header="سیاست مبدا یکسان"
+.میتوانند به صورت آزادانه به محتوای یکدیگر دسترسی داشته باشند (همان پروتکل://domain:port) پنجرهها فقط در صورتی که از یک مبدا باشند
-Otherwise, e.g. if the main window is from `site.com`, and the popup from `gmail.com`, that's impossible for user safety reasons. For the details, see chapter
.
+.را ببینید این برای دلایل امنیتی غیرممکن است. برای جزئیات، بخش `gmail.com` از popup باشد و `site.com` در غیر این صورت، برای مثال اگر پنجرهی اصلی از
```
-## Accessing window from popup
+## دسترسی به پنجره از طریق popup
-A popup may access the "opener" window as well using `window.opener` reference. It is `null` for all windows except popups.
+یک popup علاوه بر استفاده از ارجاع `window.opener` میتواند به "opener" هم دسترسی داشته باشد. این برای تمام پنجرهها به جز popupها null است.
-If you run the code below, it replaces the opener (current) window content with "Test":
+اگر کد زیر را اجرا کنید، محتوای openr window (در حال حاضر) را با "Test" جایگزین میکند.
```js run
let newWin = window.open("about:blank", "hello", "width=200,height=200");
@@ -148,19 +148,19 @@ newWin.document.write(
);
```
-So the connection between the windows is bidirectional: the main window and the popup have a reference to each other.
+بنابراین، ارتباط میان پنجرهها دوطرفه است: پنجرهی اصلی و popup ارجاعی به یکدیگر دارند.
-## Closing a popup
+## بستن یک popup
-To close a window: `win.close()`.
+برای بستن یک پنجره: `win.close()`.
-To check if a window is closed: `win.closed`.
+برای اینکه چک کنیم که یه پنجره بسته است یا نه: `win.closed`.
-Technically, the `close()` method is available for any `window`, but `window.close()` is ignored by most browsers if `window` is not created with `window.open()`. So it'll only work on a popup.
+از نظر فنی، `close()` method برای هر `window` قابل دسترسی است اما اگر `window` با `window.open()` ایجاد شده باشد، `window.close()` توسط اکثر مرورگرها نادیده گرفته میشود. پس آن فقط روی یک popup کار خواهد کرد.
-The `closed` property is `true` if the window is closed. That's useful to check if the popup (or the main window) is still open or not. A user can close it anytime, and our code should take that possibility into account.
+اگر پنجره بسته باشد، `closed` property برابر `true` میشود. این برای بررسی اینکه popup (یا پنجرهی اصلی) هنوز باز هستند یا نه مفید است. یک کاربر میتواند هر وقتی ببندد و کد ما باید امکان آن را در نظر بگیرد.
-This code loads and then closes the window:
+این کد پنجره را load میکند و سپس میبندد.
```js run
let newWindow = open('/', 'example', 'width=300,height=300');
@@ -172,87 +172,88 @@ newWindow.onload = function() {
```
-## Moving and resizing
+## حرکت دادن و تغییر اندازه
-There are methods to move/resize a window:
+راههایی برای جابهجایی/تغییر اندازهی یک پنجره وجود دارد:
`win.moveBy(x,y)`
-: Move the window relative to current position `x` pixels to the right and `y` pixels down. Negative values are allowed (to move left/up).
+: پنجره را نسبت به موقعیت فعلی، `x` پیکسل به سمت راست و `y` پیکسل به سمت پایین حرکت میدهد. مقادیر منفی هم مجاز هستند (برای حرکت دادن به چپ/بالا)
`win.moveTo(x,y)`
-: Move the window to coordinates `(x,y)` on the screen.
+: پنجره را به مختصات `(x,y)` در صفحه میبرد.
`win.resizeBy(width,height)`
-: Resize the window by given `width/height` relative to the current size. Negative values are allowed.
+: پنجره را با اندازههای `width/height` داده شده نسبت به اندازهی فعلی تغییر سایز میدهد. مقادیر منفی مجاز هستند.
`win.resizeTo(width,height)`
-: Resize the window to the given size.
+: پنجره را به اندازهی داده شده تغییر اندازه میدهد.
-There's also `window.onresize` event.
+همچنین یک `window.onresize` event نیز وجود دارد.
-```warn header="Only popups"
-To prevent abuse, the browser usually blocks these methods. They only work reliably on popups that we opened, that have no additional tabs.
+```warn header="فقط popups"
+.برای اینکه از سواستفاده جلوگیری شود، مرورگر معمولا این متدها را مسدود میکنند. آنها فقط روی پنجرههای بازشو که هیچ صفحهی اضافی ندارند، به طور قابل اعتماد کار میکنند
```
```warn header="No minification/maximization"
-JavaScript has no way to minify or maximize a window. These OS-level functions are hidden from Frontend-developers.
+.پنهان هستند Frontend-developers هیچ راهی برای به حداقل رساندن یا به حداکثر رساندن یک پنجره نیست. این متدها که در سطح سیستمعامل هستند از دید JavaScript در
-Move/resize methods do not work for maximized/minimized windows.
+.روشهای جابجایی/تغییر اندازه برای پنجرههای حداکثر/حداقل شده کار نمیکنند
```
-## Scrolling a window
+## پیمایش یک پنجره
-We already talked about scrolling a window in the chapter .
+ما قبلا در مورد scroll کردن یک پنجره در بخش صحبت کردهایم.
`win.scrollBy(x,y)`
-: Scroll the window `x` pixels right and `y` down relative the current scroll. Negative values are allowed.
+: پنجره را نسبت به scroll فعلی، `x` پیکسل به راست و `y` پیکسل به پایین scroll میکند. مقادیر منفی مجاز هستند.
`win.scrollTo(x,y)`
-: Scroll the window to the given coordinates `(x,y)`.
+: پنجره را به مختصات داده شده `(x,y)` scroll میکند.
`elem.scrollIntoView(top = true)`
-: Scroll the window to make `elem` show up at the top (the default) or at the bottom for `elem.scrollIntoView(false)`.
+: پنجره را scroll میکند که `elem` را در بالا (پیش فرض) یا پایین برای `elem.scrollIntoView(false)` نمایش دهد.
-There's also `window.onscroll` event.
+همچنین یک `window.onscroll` event نیز هست.
-## Focus/blur on a window
+## Focus/blur روی یک پنجره
-Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. And there are also `focus/blur` events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.
+از نظر تئوری برای focus/unfocus کردن روی یک پنجره، دو متد `window.focus()` و `window.blur()` وجود دارند. و همچنین `focus/blur` events هستند که که اجازه میدهند که لحظهای که بازدیدکننده روی یک پنجره focus/unfocus میکند و به جای دیگری تغییر میدهد را ثبت کنید.
-Although, in practice they are severely limited, because in the past evil pages abused them.
+اگرچه، در عمل آنها به شدت محدود هستند، زیرا در گذشته صفحات بد از آنها سوء استفاده میکردند.
-For instance, look at this code:
+برای مثال به این کد نگاه کنید:
```js run
window.onblur = () => window.focus();
```
-When a user attempts to switch out of the window (`window.onblur`), it brings the window back into focus. The intention is to "lock" the user within the `window`.
+وقتی یک کاربر تلاش میکند که از پنجره بیرون برود (`window.onblur`)، این، پنجره را به focus برمیگرداند. هدف این است که کاربر را در `window` قفل کنیم.
-So browsers had to introduce many limitations to forbid the code like that and protect the user from ads and evils pages. They depend on the browser.
+در نتیجه مرورگرها مجبور بودند تعدادی محدودیت معرفی کنند تا کدی مثل آن را ممنوع کند و کاربر را از تبلیغات و صفحات بد محافظت کنند. آنها به مرورگر بستگی دارند.
-For instance, a mobile browser usually ignores `window.focus()` completely. Also focusing doesn't work when a popup opens in a separate tab rather than a new window.
+برای مثال، یک مرورگر موبایل معمولا `window.focus()` را به طور کامل نادیده میگیرد. همچنین وقتی که یک popup در یک صفحهی جدا به جای یک پنجرهی جدبد باز میشود، فوکوس کردن کار نمیکند.
-Still, there are some use cases when such calls do work and can be useful.
+با این حال، موارد استفادهای وجود دارد که چنین فراخوانیهایی کار میکنند و میتوانند مفید باشند.
-For instance:
+برای مثال:
-- When we open a popup, it might be a good idea to run `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
-- If we want to track when a visitor actually uses our web-app, we can track `window.onfocus/onblur`. That allows us to suspend/resume in-page activities, animations etc. But please note that the `blur` event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible.
+- وقتی یک popup باز میکنیم، ممکن است ایدهی خوبی باشد که `newWindow.focus()` را روی آن اجرا کنیم. در هر صورت، برای برخی ترکیبات سیستمعامل/مرورگر، تضمین میکند که کاربر اکنون در پنجرهی جدید است.
+- گر بخواهیم ردیابی کنیم که چه زمانی بازدیدکننده واقعاً از برنامهی وب ما استفاده می کند، می توانیم `window.onfocus/onblur` را ردیابی کنیم. این به ما امکان میدهد فعالیتهای درون صفحه، انیمیشنها و... را تعلیق/ازسرگیری کنیم. اما لطفا توجه داشته باشید که `blur` event به این معنی است که بازدیدکننده از پنجره خارج شده است، اما همچنان ممکن است آن را مشاهده کند. پنجره در پسزمینه است، اما همچنان ممکن است قابل مشاهده باشد.
+-
-## Summary
+## خلاصه
-Popup windows are used rarely, as there are alternatives: loading and displaying information in-page, or in iframe.
+پنجرههای popup به ندرت استفاده میشوند. چون گزینههای دیگری وجود دارند: load کردن و نمایش دادن اطلاعات در صفحه یا در iframe.
-If we're going to open a popup, a good practice is to inform the user about it. An "opening window" icon near a link or button would allow the visitor to survive the focus shift and keep both windows in mind.
+اگر میخواهیم یک popup باز کنیم، یک تمرین خوب این است که به کاربر دربارهی آن اطلاعات بدهیم. یک نماد "opening window" نزدیک یک لینک یا دکمه به بازدیدکننده اجازه میدهد تا از تغییر فوکوس جان سالم به در ببرد و هر دو پنجره را در ذهن نگه دارد.
-- A popup can be opened by the `open(url, name, params)` call. It returns the reference to the newly opened window.
-- Browsers block `open` calls from the code outside of user actions. Usually a notification appears, so that a user may allow them.
-- Browsers open a new tab by default, but if sizes are provided, then it'll be a popup window.
-- The popup may access the opener window using the `window.opener` property.
-- The main window and the popup can freely read and modify each other if they have the same origin. Otherwise, they can change location of each other and [exchange messages](info:cross-window-communication).
+- یک popup میتواند با فراخوانی `open(url, name, params)` باز شود. آن ارجاع را به پنجرهی تازه بازشده بازمیگرداند.
+- مرورگرها فراخوانیهای `open` از خارج کنشهای کاربر را مسدود میکنند. معمولا یک اعلان ظاهر میشود که کاربر ممکن است به آنها اجازه بدهد.
+- مرورگرها به صورت پیشفرض یک tab جدید باز میکنند اما اگر اندازهها ارائه شده باشند، آنگاه یک پنجرهی popup خواهد بود.
+- پنجرهی popup ممکن است با استفاده از `window.opener` property به پنجرهی بازکننده دسترسی داشته باشد.
+- اگر popup و پنجرهی اصلی از یک مبدا باشند، میتوانند به صورت آزادانه یکدیگر را بخوانند یا تغییر دهند. در غیر این صورت، میتوانند مکان یکدیگر را تغییر دهند و [پیام رد و بدل کنند](info:cross-window-communication).
-To close the popup: use `close()` call. Also the user may close them (just like any other windows). The `window.closed` is `true` after that.
+برای بستن popup: از فراخوانی `close()` استفاده کنید. همچنین کاربر ممکن است آنها را ببندد (دقیقا شبیه هر پنجرهی دیگری). بعد از آن مقدار `window.closed` برابر `true` است.
-- Methods `focus()` and `blur()` allow to focus/unfocus a window. But they don't work all the time.
-- Events `focus` and `blur` allow to track switching in and out of the window. But please note that a window may still be visible even in the background state, after `blur`.
+- متدهای `focus()` و `blur()` اجازه میدهند که روی یک پنجره focus/unfocus کنیم. اما آنها همیشه کار نمیکنند.
+- با `focus` and `blur` events امکان ردیابی جابهجایی در داخل و خارج صفحه فراهم میشود/ اما لطفا توجه داشته باشید که بعد از `blur` یک پنجره ممکن است همچنان در وضعیت پسزمینه قابل مشاهده باشد.