Cách chặn cửa sổ bật lên bằng javascript

Một đối tượng

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
7 có thể được sử dụng để bật hoặc tắt khả năng mở cửa sổ bật lên của trang web để phản hồi lại hành động của người dùng

Giá trị cơ bản là một boolean

Theo mặc định, các trình duyệt cho phép các trang web mở cửa sổ bật lên để phản hồi một nhóm sự kiện cụ thể. ví dụ: nhấp, di chuột, gửi. Nếu

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
8 được đặt thành
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
9, sẽ không có sự kiện nào của người dùng có thể mở cửa sổ bật lên. Nếu nó được đặt thành
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
0, bộ sự kiện mặc định sẽ được phép mở cửa sổ bật lên

Ví dụ: giả sử một trang web có mã như thế này

window.addEventListener["click", [e] => {
  window.open["//example.com", "myPopup", "height=400,width=400"];
}];

Theo mặc định, thao tác này sẽ mở một cửa sổ bật lên. Nếu tiện ích mở rộng của bạn đặt

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
8 thành
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
9 thì tiện ích mở rộng đó sẽ không mở cửa sổ bật lên và người dùng sẽ được thông báo rằng cửa sổ bật lên đã bị chặn

Đôi khi, khi chúng tôi cố gắng mở một cửa sổ bằng phương pháp

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3, chúng tôi có thể thấy cửa sổ bật lên cấp quyền của trình duyệt yêu cầu quyền mở cửa sổ bật lên được tạo bởi
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3

Trong bài viết này, chúng ta sẽ xem xét cách tránh các trình chặn cửa sổ bật lên của trình duyệt trong mã JavaScript của chúng ta

Cửa sổ tránh cuộc gọi. mở trong Chức năng không đồng bộ

Để tránh cửa sổ bật lên cho phép mở cửa sổ bật lên, chúng ta nên sử dụng tránh gọi

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3 trong hàm trả về lời hứa hoặc gọi lại cho các hàm như
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
6 ,
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
7 hoặc bất kỳ hàm không đồng bộ nào khác

Điều này là do, một cửa sổ bật lên chỉ có thể được mở từ một ứng dụng mà không được phép bằng hành động trực tiếp của người dùng

Độ sâu của chuỗi cuộc gọi cũng có thể quan trọng vì một số trình duyệt cũ hơn yêu cầu quyền là

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3 không được gọi bởi hàm chạy ngay sau hành động của người dùng

Do đó, chúng ta nên gọi

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3 trong các chức năng đồng bộ được chạy do hành động trực tiếp của người dùng để tránh cửa sổ bật lên cấp quyền bật lên hiển thị trong bất kỳ trình duyệt nào

Chúng tôi có thể kiểm tra xem cửa sổ bật lên có bị chặn hay không bằng cách kiểm tra xem

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3 có trả về
const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]
01 hoặc
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
30 không

Chẳng hạn, chúng ta có thể kiểm tra xem cửa sổ bật lên có bị chặn hay không bằng cách viết

const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]

Chúng tôi gọi

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3 với
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
32 làm đối số đầu tiên và một chuỗi có một số cài đặt làm đối số thứ 3

…Và nó sẽ mở ra một cửa sổ mới với URL đã cho. Hầu hết các trình duyệt hiện đại được định cấu hình để mở url trong các tab mới thay vì các cửa sổ riêng biệt

Cửa sổ bật lên tồn tại từ thời cổ đại. Ý tưởng ban đầu là hiển thị nội dung khác mà không đóng cửa sổ chính. Hiện tại, có nhiều cách khác để làm điều đó. chúng tôi có thể tải động nội dung bằng tìm nạp và hiển thị nội dung đó trong một

const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]
05 được tạo động. Vì vậy, cửa sổ bật lên không phải là thứ chúng ta sử dụng hàng ngày

Ngoài ra, cửa sổ bật lên rất phức tạp trên thiết bị di động, không hiển thị đồng thời nhiều cửa sổ

Tuy nhiên, có những tác vụ mà cửa sổ bật lên vẫn được sử dụng, e. g. đối với ủy quyền OAuth [đăng nhập bằng Google/Facebook/…], bởi vì

  1. Cửa sổ bật lên là một cửa sổ riêng biệt có môi trường JavaScript độc lập của riêng nó. Vì vậy, việc mở cửa sổ bật lên từ trang web không đáng tin cậy của bên thứ ba là an toàn
  2. Rất dễ dàng để mở một cửa sổ bật lên
  3. Cửa sổ bật lên có thể điều hướng [thay đổi URL] và gửi tin nhắn đến cửa sổ mở

Chặn cửa sổ bật lên

Trong quá khứ, các trang web độc ác đã lạm dụng cửa sổ bật lên rất nhiều. Một trang xấu có thể mở ra vô số cửa sổ bật lên có quảng cáo. Vì vậy, bây giờ hầu hết các trình duyệt đều cố gắng chặn cửa sổ bật lên và bảo vệ người dùng

Hầu hết các trình duyệt chặn cửa sổ bật lên nếu chúng được gọi bên ngoài trình xử lý sự kiện do người dùng kích hoạt như

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
0

Ví dụ

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};

Bằng cách này, người dùng được bảo vệ phần nào khỏi các cửa sổ bật lên không mong muốn, nhưng chức năng này không bị tắt hoàn toàn

cửa sổ. mở

Cú pháp để mở một cửa sổ bật lên là.

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
1

urlMột URL để tải vào cửa sổ mới. nameTên của cửa sổ mới. Mỗi cửa sổ có một
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
2 và ở đây chúng tôi có thể chỉ định cửa sổ nào sẽ sử dụng cho cửa sổ bật lên. Nếu đã có một cửa sổ có tên như vậy – URL đã cho sẽ mở trong đó, nếu không, một cửa sổ mới sẽ được mở. paramsChuỗi cấu hình cho cửa sổ mới. Nó chứa các cài đặt, được phân tách bằng dấu phẩy. Chẳng hạn như không được có khoảng trắng trong params.
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3

Cài đặt cho

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
4

  • Chức vụ
    • // popup blocked
      window.open['//javascript.info'];
      
      // popup allowed
      button. title = [] => {
        window.open['//javascript.info'];
      };
      5 [số] – tọa độ của góc trên cùng bên trái của cửa sổ trên màn hình. Có một giới hạn. một cửa sổ mới không thể được định vị ngoài màn hình
    • // popup blocked
      window.open['//javascript.info'];
      
      // popup allowed
      button. title = [] => {
        window.open['//javascript.info'];
      };
      6 [số] – chiều rộng và chiều cao của cửa sổ mới. Có giới hạn về chiều rộng/chiều cao tối thiểu, vì vậy không thể tạo cửa sổ ẩn
  • tính năng cửa sổ
    • // popup blocked
      window.open['//javascript.info'];
      
      // popup allowed
      button. title = [] => {
        window.open['//javascript.info'];
      };
      7 [có/không] – hiển thị hoặc ẩn menu trình duyệt trên cửa sổ mới
    • // popup blocked
      window.open['//javascript.info'];
      
      // popup allowed
      button. title = [] => {
        window.open['//javascript.info'];
      };
      8 [có/không] – hiển thị hoặc ẩn thanh điều hướng của trình duyệt [quay lại, chuyển tiếp, tải lại, v.v.] trên cửa sổ mới
    • // popup blocked
      window.open['//javascript.info'];
      
      // popup allowed
      button. title = [] => {
        window.open['//javascript.info'];
      };
      9 [có/không] – hiển thị hoặc ẩn trường URL trong cửa sổ mới. FF và IE mặc định không cho ẩn
    • const pop = [url, w, h] => {
      const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
      return popup !== null && typeof popup !== 'undefined'
      }
      console.log[pop['//example.com']]
      30 [có/không] – hiển thị hoặc ẩn thanh trạng thái. Một lần nữa, hầu hết các trình duyệt buộc nó phải hiển thị
    • const pop = [url, w, h] => {
      const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
      return popup !== null && typeof popup !== 'undefined'
      }
      console.log[pop['//example.com']]
      31 [có/không] – cho phép vô hiệu hóa thay đổi kích thước cho cửa sổ mới. Không được khuyến khích
    • const pop = [url, w, h] => {
      const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
      return popup !== null && typeof popup !== 'undefined'
      }
      console.log[pop['//example.com']]
      32 [có/không] – cho phép tắt thanh cuộn cho cửa sổ mới. Không được khuyến khích

Ngoài ra còn có một số tính năng dành riêng cho trình duyệt ít được hỗ trợ, thường không được sử dụng. Kiểm tra cửa sổ. mở trong MDN để biết ví dụ

Thí dụ. một cửa sổ tối giản

Hãy mở một cửa sổ với bộ tính năng tối thiểu, chỉ để xem trình duyệt nào cho phép tắt

const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]
3

Ở đây, hầu hết các “tính năng cửa sổ” đều bị vô hiệu hóa và cửa sổ được đặt ngoài màn hình. Chạy nó và xem những gì thực sự xảy ra. Hầu hết các trình duyệt đều “sửa chữa” những thứ kỳ quặc như 0

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
6 và ngoài màn hình
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
5. Chẳng hạn, Chrome mở một cửa sổ như vậy với chiều rộng/chiều cao đầy đủ để nó chiếm toàn màn hình

Hãy thêm các phương án định vị thông thường và các tọa độ

const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]
35,
const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]
36,
const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]
37,
const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]
38 hợp lý

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
3

Hầu hết các trình duyệt hiển thị ví dụ trên theo yêu cầu

Quy tắc cho cài đặt bị bỏ qua

  • Nếu không có đối số thứ 3 trong lệnh gọi
    const pop = [url, w, h] => {
    const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
    return popup !== null && typeof popup !== 'undefined'
    }
    console.log[pop['//example.com']]
    39 hoặc nó trống, thì các tham số cửa sổ mặc định sẽ được sử dụng
  • Nếu có một chuỗi tham số, nhưng một số tính năng
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    30 bị bỏ qua, thì các tính năng bị bỏ qua được coi là có giá trị
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    31. Vì vậy, nếu bạn chỉ định tham số, hãy đảm bảo rằng bạn đã đặt rõ ràng tất cả các tính năng bắt buộc thành có
  • Nếu không có
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    5 trong thông số, thì trình duyệt sẽ cố mở một cửa sổ mới gần cửa sổ được mở lần cuối
  • Nếu không có
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    6, thì cửa sổ mới sẽ có cùng kích thước với cửa sổ được mở lần cuối

Truy cập cửa sổ bật lên từ cửa sổ

Cuộc gọi

const pop = [url, w, h] => {
const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
return popup !== null && typeof popup !== 'undefined'
}
console.log[pop['//example.com']]
39 trả về một tham chiếu đến cửa sổ mới. Nó có thể được sử dụng để thao tác các thuộc tính của nó, thay đổi vị trí và hơn thế nữa

Trong ví dụ này, chúng tôi tạo nội dung bật lên từ JavaScript

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
0

Và ở đây chúng tôi sửa đổi nội dung sau khi tải

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
1

Xin lưu ý. ngay sau

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
35, cửa sổ mới chưa được tải. Điều đó được chứng minh bởi
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
36 trong dòng
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
37. Vì vậy, chúng tôi đợi
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
38 sửa đổi nó. Chúng tôi cũng có thể sử dụng trình xử lý
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
39 cho
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
00

Chính sách xuất xứ giống nhau

Windows có thể tự do truy cập nội dung của nhau chỉ khi chúng đến từ cùng một nguồn gốc [cùng một giao thức. //miền. Hải cảng]

Nếu không, e. g. nếu cửa sổ chính là từ

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
01 và cửa sổ bật lên từ
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
02, điều đó là không thể vì lý do an toàn của người dùng. Để biết chi tiết, xem chương Giao tiếp qua cửa sổ

Truy cập cửa sổ từ cửa sổ bật lên

Một cửa sổ bật lên cũng có thể truy cập vào cửa sổ "trình mở" bằng cách sử dụng tham chiếu

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
03. Đó là
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
04 cho tất cả các cửa sổ ngoại trừ cửa sổ bật lên

Nếu bạn chạy mã bên dưới, nó sẽ thay thế nội dung cửa sổ mở [hiện tại] bằng “Kiểm tra”

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
2

Vì vậy, kết nối giữa các cửa sổ là hai chiều. cửa sổ chính và cửa sổ bật lên có liên quan đến nhau

Đóng cửa sổ bật lên

Để đóng một cửa sổ.

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
05

Để kiểm tra xem một cửa sổ có bị đóng không.

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
06

Về mặt kỹ thuật, phương pháp

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
07 có sẵn cho bất kỳ
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
08 nào, nhưng hầu hết các trình duyệt đều bỏ qua
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
09 nếu
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
08 không được tạo bằng
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
11. Vì vậy, nó sẽ chỉ hoạt động trên cửa sổ bật lên

Thuộc tính

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
12 là
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
13 nếu cửa sổ đóng. Điều đó rất hữu ích để kiểm tra xem cửa sổ bật lên [hoặc cửa sổ chính] có còn mở hay không. Người dùng có thể đóng nó bất cứ lúc nào và mã của chúng tôi sẽ tính đến khả năng đó

Mã này tải và sau đó đóng cửa sổ

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
2

Di chuyển và thay đổi kích thước

Có các phương pháp để di chuyển/thay đổi kích thước cửa sổ

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
14Di chuyển cửa sổ so với vị trí hiện tại
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
15 pixel sang bên phải và
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
16 pixel xuống dưới. Các giá trị âm được phép [để di chuyển sang trái/lên trên].
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
17Di chuyển cửa sổ đến tọa độ
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
18 trên màn hình.
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
19Thay đổi kích thước cửa sổ theo
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
6 đã cho so với kích thước hiện tại. Cho phép giá trị âm.
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
21Thay đổi kích thước cửa sổ theo kích thước nhất định

Ngoài ra còn có sự kiện

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
22

Chỉ cửa sổ bật lên

Để ngăn chặn lạm dụng, trình duyệt thường chặn các phương pháp này. Chúng chỉ hoạt động đáng tin cậy trên các cửa sổ bật lên mà chúng tôi đã mở, không có tab bổ sung

Không thu nhỏ/tối đa hóa

JavaScript không có cách nào để thu nhỏ hoặc phóng to cửa sổ. Các chức năng cấp hệ điều hành này bị ẩn khỏi các nhà phát triển Frontend

Các phương pháp di chuyển/thay đổi kích thước không hoạt động đối với các cửa sổ được phóng to/thu nhỏ

Cuộn một cửa sổ

Chúng ta đã nói về việc cuộn cửa sổ trong chương Kích thước cửa sổ và cuộn

________ 423 Cuộn cửa sổ ________ 315 pixel sang phải và
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
16 xuống dưới so với cuộn hiện tại. Cho phép giá trị âm.
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
26Cuộn cửa sổ đến tọa độ đã cho
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
18. ________ 428 Cuộn cửa sổ để làm cho ________ 429 hiển thị ở trên cùng [mặc định] hoặc ở dưới cùng cho
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
20

Ngoài ra còn có sự kiện

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
21

Lấy nét/làm mờ cửa sổ

Về mặt lý thuyết, có các phương pháp

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
22 và
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
23 để lấy nét/không lấy nét trên một cửa sổ. Ngoài ra còn có các sự kiện
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
24 cho phép ghi lại khoảnh khắc khi người truy cập tập trung vào một cửa sổ và chuyển sang nơi khác

Mặc dù, trong thực tế, chúng bị hạn chế nghiêm trọng, bởi vì trong quá khứ các trang ác đã lạm dụng chúng

Ví dụ, nhìn vào mã này

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
4

Khi người dùng cố gắng tắt cửa sổ [

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
25], nó sẽ đưa cửa sổ trở lại tiêu điểm. Mục đích là để "khóa" người dùng trong
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
08

Vì vậy, các trình duyệt đã phải đưa ra nhiều giới hạn để cấm mã như vậy và bảo vệ người dùng khỏi các trang quảng cáo và tệ nạn. Chúng phụ thuộc vào trình duyệt

Chẳng hạn, một trình duyệt di động thường bỏ qua hoàn toàn

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
22. Ngoài ra, tiêu điểm không hoạt động khi cửa sổ bật lên mở trong một tab riêng thay vì một cửa sổ mới

Tuy nhiên, có một số trường hợp sử dụng khi các cuộc gọi như vậy hoạt động và có thể hữu ích

Ví dụ

  • Khi chúng tôi mở một cửa sổ bật lên, có thể nên chạy
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    28 trên đó. Chỉ trong trường hợp, đối với một số kết hợp hệ điều hành/trình duyệt, nó đảm bảo rằng người dùng hiện đang ở trong cửa sổ mới
  • Nếu chúng tôi muốn theo dõi thời điểm khách truy cập thực sự sử dụng ứng dụng web của mình, chúng tôi có thể theo dõi
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    29. Điều đó cho phép chúng tôi tạm dừng/tiếp tục các hoạt động trong trang, hoạt ảnh, v.v. Nhưng xin lưu ý rằng sự kiện
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    40 có nghĩa là khách truy cập đã tắt từ cửa sổ, nhưng họ vẫn có thể quan sát thấy nó. Cửa sổ ở chế độ nền nhưng vẫn có thể hiển thị

Bản tóm tắt

Cửa sổ bật lên hiếm khi được sử dụng vì có các lựa chọn thay thế. tải và hiển thị thông tin trong trang hoặc trong iframe

Nếu chúng tôi định mở một cửa sổ bật lên, một cách tốt là thông báo cho người dùng về nó. Biểu tượng “cửa sổ đang mở” gần liên kết hoặc nút sẽ cho phép khách truy cập sống sót sau khi chuyển tiêu điểm và ghi nhớ cả hai cửa sổ

  • Một cửa sổ bật lên có thể được mở bằng cuộc gọi
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    41. Nó trả về tham chiếu đến cửa sổ mới mở
  • Trình duyệt chặn cuộc gọi
    const pop = [url, w, h] => {
    const popup = window.open[url, '_blank', 'toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=500,height=500'];
    return popup !== null && typeof popup !== 'undefined'
    }
    console.log[pop['//example.com']]
    39 từ mã bên ngoài hành động của người dùng. Thông thường, một thông báo sẽ xuất hiện để người dùng có thể cho phép họ
  • Các trình duyệt mở một tab mới theo mặc định, nhưng nếu kích thước được cung cấp, thì đó sẽ là một cửa sổ bật lên
  • Cửa sổ bật lên có thể truy cập cửa sổ mở bằng thuộc tính
    // popup blocked
    window.open['//javascript.info'];
    
    // popup allowed
    button. title = [] => {
      window.open['//javascript.info'];
    };
    03
  • Cửa sổ chính và cửa sổ bật lên có thể tự do đọc và sửa đổi lẫn nhau nếu chúng có cùng nguồn gốc. Nếu không, họ có thể thay đổi vị trí của nhau và trao đổi tin nhắn

Để đóng cửa sổ bật lên. sử dụng cuộc gọi

// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
07. Ngoài ra, người dùng có thể đóng chúng [giống như bất kỳ cửa sổ nào khác].
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
45 là
// popup blocked
window.open['//javascript.info'];

// popup allowed
button. title = [] => {
  window.open['//javascript.info'];
};
13 sau đó

Lệnh JavaScript cho cửa sổ bật lên là gì?

Cú pháp để mở cửa sổ bật lên là. cửa sổ. mở[url, tên, thông số] . url. Một URL để tải vào cửa sổ mới.

là pop

Trong Javascript, hộp bật lên được sử dụng để hiển thị thông báo hoặc thông báo cho người dùng . Có ba loại hộp bật lên trong JavaScript là Hộp thông báo, Hộp xác nhận và Hộp nhắc nhở. hộp cảnh báo. Nó được sử dụng khi cần tạo một thông báo cảnh báo.

Làm cách nào để chặn cửa sổ bật lên không phù hợp

Nếu bạn thấy thông báo gây phiền nhiễu từ một trang web, hãy tắt quyền. .
Trên điện thoại hoặc máy tính bảng Android của bạn, hãy mở ứng dụng Chrome
Tới một trang web
Ở bên phải của thanh địa chỉ, hãy nhấn vào Thông tin khác
Nhấn vào Cài đặt trang web
Trong phần "Quyền", hãy nhấn vào Thông báo. .
Tắt cài đặt

Chủ Đề