Popups and window


The syntax to open a popup is: 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.
  • 特定のパラメータ入力が存在しない場合、デフォルトのウィンドウパラメータ値はleft/topwidth/hightのように「no」と入力され、前のポップアップ値が継承されます.
    (例)
    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.
    絶対値に調整します.
  • 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.
  • 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:
  • if we have a reference to another window, e.g. a popup created by window.open or a window inside <iframe> , and that window comes from the same origin, then we have full access to that window.
  • 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 : 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).
  • Locationは書き込みのみで読み取りはできません.
    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 .
  • 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:
    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.