Popups and window
8223 ワード
The syntax to open a popup is:
url
An URL to load into the new window.
name
A name of the new window. Each window has a
params
The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance:
Position:
Window features:
If there is a string of params, but some
If there is no
If there is no
特定のパラメータ入力が存在しない場合、デフォルトのウィンドウパラメータ値はleft/topwidth/hightのように「no」と入力され、前のポップアップ値が継承されます.
(例)
Most browsers block popups if they are called outside of user-triggered event handlers like
window.Openコードの特徴は,ユーザのイベントハンドラでのみ実行されることである.残りの領域でブロックされます.
The difference is that Firefox treats a timeout of 2000ms or less are acceptable, but after it – removes the “trust”, assuming that now it’s “outside of the user action”. So the first one is blocked, and the second one is not.
火炎狐限速規定settimeout 2000 ms
Same origin policy
Windows may freely access content of each other only if they come from the same origin (the same protocol://domain:port).
Otherwise, e.g. if the main window is from
DOMは、お互いのコンテンツに自由にアクセスするために同じソースから来なければならない.
基本的に、「原点」の定義は次のとおりです.protocol://domain:portとします.
Window.Open()で円オブジェクトを作成する場合、JavaScriptはwindowです.開いているウィンドウのオブジェクト(親)を、開いているプログラムに格納します.これにより、サブウィンドウで親ウィンドウを制御したり、データを交換したりすることができます.
ポップアップメニューを再開すると、ポップアップメニューに関連付けられたwindow/documentオブジェクトも作成されます.このポップアップメニューを作成するウィンドウオブジェクトはwindowです.オープン()に格納され、相互参照できます.
To close a window:
To check if a window is closed:
ポップアップウィンドウを閉じるときに使う方法win.close()/ポップアップウィンドウが閉じているかどうかを確認できるプロフェッショナルはwinです.closed
現在の位置でxy移動量を決める
絶対値で画面からx,y位置を移動します.
現在のサイズでは、横幅と縦幅が相対的に調整されます.
絶対値に調整します. If we want to track when a visitor actually uses our web-app, we can track Cross-window communication
どうげん
The “Same Origin” policy states that: if we have a reference to another window, e.g. a popup created by otherwise, if it comes from another origin, then we can’t access the content of that window: variables, document, anything. The only exception is Locationは書き込みのみで読み取りはできません.
An
We can access them using properties: we can make the browser ignore that difference, so that they can be treated as coming from the “same origin” for the purposes of cross-window communication.
To make it work, each such window should run the code:
window.open(url, name, params)
:url
An URL to load into the new window.
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.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
.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. 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.(例)
window.open('https://javascript.info/')
let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;
open('/', 'test', params);
Most browsers block popups if they are called outside of user-triggered event handlers like
onclick
.window.Openコードの特徴は,ユーザのイベントハンドラでのみ実行されることである.残りの領域でブロックされます.
The difference is that Firefox treats a timeout of 2000ms or less are acceptable, but after it – removes the “trust”, assuming that now it’s “outside of the user action”. So the first one is blocked, and the second one is not.
火炎狐限速規定settimeout 2000 ms
Same origin policy
Windows may freely access content of each other only if they come from the same origin (the same protocol://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 Cross-window communication .DOMは、お互いのコンテンツに自由にアクセスするために同じソースから来なければならない.
基本的に、「原点」の定義は次のとおりです.protocol://domain:portとします.
Window.opener()
Window.Open()で円オブジェクトを作成する場合、JavaScriptはwindowです.開いているウィンドウのオブジェクト(親)を、開いているプログラムに格納します.これにより、サブウィンドウで親ウィンドウを制御したり、データを交換したりすることができます.
ポップアップメニューを再開すると、ポップアップメニューに関連付けられたwindow/documentオブジェクトも作成されます.このポップアップメニューを作成するウィンドウオブジェクトはwindowです.オープン()に格納され、相互参照できます.
To close a window:
win.close()
.To check if a window is closed:
win.closed
.ポップアップウィンドウを閉じるときに使う方法win.close()/ポップアップウィンドウが閉じているかどうかを確認できるプロフェッショナルはwinです.closed
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).現在の位置でxy移動量を決める
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.現在のサイズでは、横幅と縦幅が相対的に調整されます.
win.resizeTo(width,height)
Resize the window to the given size.絶対値に調整します.
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. Cross-window communication
These ones do not:
http://**www.**site.com
(another domain: www.
matters) http://**site.org**
(another domain: .org
matters) **https://**site.com
(another protocol: https
) http://site.com:**8080**
(another port: 8080
) The “Same Origin” policy states that:
window.open
or a window inside <iframe>
, and that window comes from the same origin, then we have full access to that window. location
: we can change it (thus redirecting the user). But we cannot read location (so we can’t see where the user is now, no information leak). An
<iframe>
tag hosts a separate embedded window, with its own separate document
and window
objects.We can access them using properties:
iframe.contentWindow
to get the window inside the <iframe>
. iframe.contentDocument
to get the document inside the <iframe>
, shorthand for iframe.contentWindow.document
. To make it work, each such window should run the code:
document.domain = 'site.com';
That’s all. Now they can interact without limitations. Again, that’s only possible for pages with the same second-level domain.Reference
この問題について(Popups and window), 我々は、より多くの情報をここで見つけました https://velog.io/@hqillz/Popups-and-windowテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol