JS의 Window.open() 사용법에 대한 자세한 설명

1. 소개

window.open() 메소드는 브라우저에서 새 창이나 탭을 여는 JavaScript의 내장 메소드입니다.

window.open(url, name, features, replace)

팝업 창의 남용이 보안 문제가 되었기 때문에 최신 브라우저는 일반적으로 사용자 상호 작용에 의해 트리거되지 않는 한 기본적으로 window.open() 메서드에 대한 호출을 차단한다는 점에 유의해야 합니다. 따라서 실제 개발에서는 브라우저가 악의적인 행위로 오해하지 않도록 주의해서 이 방법을 사용해야 합니다.

2. 매개변수 설명

url필수 매개변수: 열려야 하는 URL의 주소입니다. HTTP, HTTPS, FTP 등과 같은 프로토콜을 포함하여 유효한 URL이면 무엇이든 가능합니다.
name선택적 매개변수: 새 창의 이름, 기본값은 _blank입니다. 다음 상황에서 임의의 문자열이 될 수 있습니다.
- _self: 현재 창에서 열립니다.
- _blank또는 다음 매개변수를 작성하지 마십시오. 새 창에서 열면 창 이름이 빈 문자열입니다.
- 任何字符串새 창에서 열면 창 이름은 임의의 문자열입니다.如果指定的名称已经存在，则会在该窗口中打开该 URL，而不是新建一个窗口。
features선택적 매개변수: 새 창의 일부 특성을 지정하는 쉼표로 구분된 문자열입니다. 이 문자열에는 다음 속성이 포함될 수 있습니다.
- width: 창의 너비입니다.
- height: 창의 높이입니다.
- top: 창과 화면 상단 사이의 거리, 기본값은 0입니다.
- menubar: 메뉴바 표시 여부, yes\no;
- toolbar: 도구 모음 표시 여부, 예\no;
- location: 주소 표시줄 표시 여부, 예\no;
- status: 상태 표시줄 표시 여부, yes\no;
- resizable: 사용자가 창 크기를 조정하도록 허용할지 여부, yes\no;
- scrollbars: 스크롤 막대를 표시할지 여부입니다. 예\아니요.
replace선택적 매개변수: 새로 열린 URL이 현재 페이지 기록을 대체하는지 여부를 지정하는 부울 값입니다. true인 경우 새 URL이 현재 페이지의 기록을 대체하고 사용자가 브라우저의 "뒤로" 버튼을 클릭하면 이전 페이지로 돌아갑니다. false인 경우 새 URL이 현재 페이지의 기록에 추가됩니다. , 사용자가 브라우저의 '뒤로' 버튼을 클릭하면 이전 URL로 돌아갑니다.

참고:
1. 기능 매개변수를 지정할 때 너비와 높이에 명시적인 값을 지정해야 합니다. 그렇지 않으면 기능 매개변수가 작동하지 않습니다.
2. 기능 매개변수 중 width, height, top, left가 일반적으로 사용되는 매개변수입니다. 더 나은 사용자 경험을 위해 메뉴 모음, 도구 모음, 위치, 상태, 크기 조정 가능 및 스크롤 막대 매개변수는 더 이상 사용되지 않으므로 관련 설정이 이루어지더라도 변경되지 않습니다.

3. 사용예

1. 현재 창에서 웹페이지를 엽니다.

window.open("https://www.baidu.com/","_self");

window.location.href을 사용하여 현재 창에서 열 수도 있습니다. 이는 JavaScript의 속성이며 현재 웹페이지의 URL 주소를 나타냅니다. 현재 웹페이지의 URL을 가져오는 데 사용할 수 있으며, 다른 웹페이지로 이동하는 데에도 사용할 수 있습니다.

console.log(window.location.href); // 输出当前网页的 URL 地址
window.location.href = "https://www.example.com"; // 跳转到 https://www.example.com

window.location.href 속성은 읽고 쓸 수 있으며 해당 값을 설정할 때 다른 웹 페이지로 직접 이동할 수 있습니다. 따라서 실수로 페이지가 넘어가는 일이 발생하지 않도록 사용 시 주의해야 합니다.

2. 새 창에서 웹페이지 열기

window.open("https://www.baidu.com/")
window.open("https://www.baidu.com/","_blank")
window.open("https://www.baidu.com/","任何字符串");

3. 지정된 크기와 위치의 웹페이지를 별도의 창에서 엽니다.

window.open(url, "_blank", "width=800,height=300,top = 200, left=400")

4. 실수요

요구 사항이 있습니다: 현재 페이지에서 편집을 클릭하면 편집할 새 페이지가 열립니다. 편집할 새 페이지가 이미 열려 있는 경우 다시 편집을 클릭하면 다시 열리지 않고 편집된 페이지로 바로 전환됩니다.

// 前往编辑页面
toEdit (item) {
    
    
  if (item.appCategory === "import" && item.importType === "URL") return
  let win = window.open('', item.id + 'edit') // open一个空页面
  
  if (win.location.href === 'about:blank') {
    
     // 没有打开过走这里
    window.open(
      window.location.origin + '/ol/analysisEdit?appId=' + item.id +
        '&appName=' + item.appName +
        '&type=app',
      item.id + 'edit' // `如果指定的名称已经存在，则在该窗口中打开该 URL，而不是新建一个窗口。`
    )
  } else {
    
     // 已打开走这里
    const params = formatUrlParams(win.location.href) // 解析

    if (params.type !== 'app') {
    
    
      win.location.href = window.location.origin + '/ol/analysisEdit?appId=' + item.id +
        '&appName=' + item.appName +
        '&type=app'
    }
    win.focus() // 将焦点设置到当前窗口
  }
}