Hướng dẫn javascript redirect with message - chuyển hướng javascript với tin nhắn

Question

0

Nội dung chính Show

Cùng nguồn gốc
Trong hành động: iframe
Windows trên các tên miền phụ: document.domain
Iframe: Cạm bẫy tài liệu sai
Bộ sưu tập: Window.Frames
Liên kết điều hướng là:
Ví dụ dưới đây thể hiện một iframe được hộp cát với bộ hạn chế mặc định: <iframe src="https://example.com" id="iframe"></iframe> <script> iframe.onload = function() { // we can get the reference to the inner window let iframeWindow = iframe.contentWindow; // OK try { // ...but not to the document inside it let doc = iframe.contentDocument; // ERROR } catch(e) { alert(e); // Security Error (another origin) } // also we can't READ the URL of the page in iframe try { // Can't read URL from the Location object let href = iframe.contentWindow.location.href; // ERROR } catch(e) { alert(e); // Security Error } // ...we can WRITE into location (and thus load something else into the iframe)! iframe.contentWindow.location = '/'; // OK iframe.onload = null; // clear the handler, not to run it after the location change }; </script>5. Nó có một số JavaScript và một hình thức.
Mục đích của thuộc tính <iframe src="https://example.com" id="iframe"></iframe> <script> iframe.onload = function() { // we can get the reference to the inner window let iframeWindow = iframe.contentWindow; // OK try { // ...but not to the document inside it let doc = iframe.contentDocument; // ERROR } catch(e) { alert(e); // Security Error (another origin) } // also we can't READ the URL of the page in iframe try { // Can't read URL from the Location object let href = iframe.contentWindow.location.href; // ERROR } catch(e) { alert(e); // Security Error } // ...we can WRITE into location (and thus load something else into the iframe)! iframe.contentWindow.location = '/'; // OK iframe.onload = null; // clear the handler, not to run it after the location change }; </script>7 chỉ để thêm nhiều hạn chế hơn. Nó không thể loại bỏ chúng. Cụ thể, nó có thể thư giãn các hạn chế cùng với nguồn gốc nếu iframe đến từ một nguồn gốc khác.
<input type="button" onclick="two();" value="Submit">09 Dữ liệu để gửi. Có thể là bất kỳ đối tượng nào, dữ liệu được nhân bản bằng cách sử dụng thuật toán tuần tự hóa có cấu trúc trên mạng. IE chỉ hỗ trợ các chuỗi, vì vậy chúng ta nên <input type="button" onclick="two();" value="Submit">10 các đối tượng phức tạp để hỗ trợ trình duyệt đó .________ 111 chỉ định nguồn gốc cho cửa sổ đích, do đó chỉ có một cửa sổ từ nguồn gốc đã cho sẽ nhận được tin nhắn.
Đối tượng sự kiện có các thuộc tính đặc biệt:

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Hiện tại, tôi đã quản lý để tạo ra sự kiện "cảm ơn" cảnh báo sau khi nhấp chuột. Nó hoạt động trong 1 giây và chuyển hướng đến https://www.w3schools.com.

Làm thế nào để tạo không phải là cảnh báo bật lên, mà là một loại trang trống tạm thời với "cảm ơn" trong 3-4 giây ở giữa?

Sau đó, tôi muốn được chuyển hướng đến https://www.w3schools.com.

function two() {
  alert('Thanks');
  window.location.href = 'https://www.w3schools.com';
}

<input type="button" onclick="two();" value="Submit">

hỏi ngày 21 tháng 7 năm 2021 lúc 19:30Jul 21, 2021 at 19:30

Bạn có thể tạo một trang Splash được hiển thị trên nội dung hiện tại và sau đó sử dụng thời gian chờ để chuyển hướng người dùng.

Chỉnh sửa: Chuyển văn bản sang quy tắc CSS. Nếu bạn không muốn điều này, hãy thêm văn bản bên trong thẻ

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

3 và xóa quy tắc
function redirect() { document.querySelector('.thanks').classList.remove('thanks-hidden'); setTimeout(() => { window.location.href = 'https://www.w3schools.com/'; }, 3000); // Wait 3 seconds and then redirect. }
4 CSS. Moved the text to the CSS rule. If you do not want this, add the text inside the

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

3 tag and remove the

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

4 CSS rule.

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

Đã trả lời ngày 21 tháng 7 năm 2021 lúc 19:37Jul 21, 2021 at 19:37

Ông Polywhirlmr. PolywhirlMr. Polywhirl

37K12 Huy hiệu vàng79 Huy hiệu bạc126 Huy hiệu đồng12 gold badges79 silver badges126 bronze badges

2

Bạn có thể sử dụng SetTimeout

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

Đã trả lời ngày 21 tháng 7 năm 2021 lúc 19:35Jul 21, 2021 at 19:35

ControlaltDelControlaltDelControlAltDel

32,9k9 Huy hiệu vàng49 Huy hiệu bạc78 Huy hiệu đồng9 gold badges49 silver badges78 bronze badges

1

Bạn có thể sử dụng

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

5 để đặt bộ hẹn giờ cho một chức năng cụ thể. Bạn có thể sử dụng bên trong để xóa nội dung của cơ thể.

function two() {
  alert('Thanks');
  document.body.innerHTML = '';
  setTimeout(() => {
window.location.href = 'https://www.w3schools.com';
},4000);
}

<input type="button" onclick="two();" value="Submit">

Đã trả lời ngày 21 tháng 7 năm 2021 lúc 19:36Jul 21, 2021 at 19:36

Tushar Shahitushar ShahiTushar Shahi

Huy hiệu vàng 13,9K11 gold badge10 silver badges30 bronze badges

1

Chính sách tương tự cùng nguồn gốc (cùng một trang web) giới hạn truy cập của các cửa sổ và khung cho nhau.

Ý tưởng là nếu người dùng mở hai trang: một từ

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

6 và một trang khác là

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

7, thì họ sẽ muốn có một tập lệnh từ

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

6 để đọc thư của chúng tôi từ

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

7. Vì vậy, mục đích của chính sách có nguồn gốc cùng nguồn gốc là để bảo vệ người dùng khỏi hành vi trộm cắp thông tin.

Cùng nguồn gốc

Hai URL được cho là có cùng một nguồn gốc của người Hồi giáo nếu chúng có cùng một giao thức, tên miền và cổng.

Các URL này đều có chung nguồn gốc:

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

0

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

1

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

2

Những người này không:

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

3 (miền khác:

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

4 quan trọng)

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

5 (miền khác:

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

6 vấn đề)

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

7 (giao thức khác:

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

8)

.thanks {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.thanks:after {
  content: "Thanks";
}

.thanks-hidden {
  display: none;
}

9 (một cổng khác:

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

0)

Chính sách của nguồn gốc cùng nguồn gốc của người Viking tuyên bố rằng:

Nếu chúng ta có một tham chiếu đến một cửa sổ khác, ví dụ: Một cửa sổ bật lên được tạo bởi
```
<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>
```
1 hoặc một cửa sổ bên trong
```
<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>
```
2 và cửa sổ đó xuất phát từ cùng một nguồn gốc, sau đó chúng tôi có quyền truy cập đầy đủ vào cửa sổ đó.
Mặt khác, nếu nó đến từ một nguồn gốc khác, thì chúng ta có thể truy cập nội dung của cửa sổ đó: biến, tài liệu, bất cứ điều gì. Ngoại lệ duy nhất là
```
<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>
```
3: chúng ta có thể thay đổi nó (do đó chuyển hướng người dùng). Nhưng chúng ta không thể đọc được vị trí (vì vậy chúng ta có thể thấy người dùng hiện đang ở đâu, không có rò rỉ thông tin).

Trong hành động: iframe

Một thẻ

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2 lưu trữ một cửa sổ nhúng riêng biệt, với các đối tượng

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

5 và

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

6 riêng của nó.

Chúng ta có thể truy cập chúng bằng các thuộc tính:

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

7 để có được cửa sổ bên trong

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2.

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

9 để có được tài liệu bên trong

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2, tốc ký cho

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

1.

Khi chúng tôi truy cập một cái gì đó bên trong cửa sổ nhúng, trình duyệt sẽ kiểm tra xem iframe có cùng nguồn gốc không. Nếu điều đó không như vậy thì quyền truy cập bị từ chối (viết thành

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

3 là một ngoại lệ, thì nó vẫn được phép).

Chẳng hạn, hãy để thử đọc và ghi vào

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2 từ một nguồn gốc khác:

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

Mã trên hiển thị lỗi cho bất kỳ hoạt động nào ngoại trừ:

Nhận được tham chiếu đến cửa sổ bên trong

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

7 - mà cho phép.

Viết cho

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

3.

Trái ngược với điều đó, nếu

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2 có cùng nguồn gốc, chúng ta có thể làm bất cứ điều gì với nó:

<!-- iframe from the same site -->
<iframe src="/" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // just do anything
    iframe.contentDocument.body.prepend("Hello, world!");
  };
</script>

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

7 so với

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

8

Sự kiện

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

7 (trên thẻ

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2) về cơ bản giống như

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

8 (trên đối tượng cửa sổ nhúng). Nó kích hoạt khi cửa sổ nhúng tải đầy đủ với tất cả các tài nguyên.

Tuy nhiên, chúng tôi có thể truy cập

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

8 cho một iframe từ một nguồn gốc khác, do đó, sử dụng

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

7.

Windows trên các tên miền phụ: document.domain

Theo định nghĩa, hai URL với các miền khác nhau có nguồn gốc khác nhau.

Nhưng nếu Windows chia sẻ cùng một miền cấp hai, ví dụ,

function two() {
  alert('Thanks');
  document.body.innerHTML = '';
  setTimeout(() => {
window.location.href = 'https://www.w3schools.com';
},4000);
}

4,

function two() {
  alert('Thanks');
  document.body.innerHTML = '';
  setTimeout(() => {
window.location.href = 'https://www.w3schools.com';
},4000);
}

5 và

function two() {
  alert('Thanks');
  document.body.innerHTML = '';
  setTimeout(() => {
window.location.href = 'https://www.w3schools.com';
},4000);
}

6 (để miền cấp hai chung của chúng là

function two() {
  alert('Thanks');
  document.body.innerHTML = '';
  setTimeout(() => {
window.location.href = 'https://www.w3schools.com';
},4000);
}

6), chúng ta có thể làm cho trình duyệt bỏ qua sự khác biệt đó, để chúng có thể được đối xử như Nguồn gốc cùng một nguồn gốc cho các mục đích giao tiếp giữa cửa sổ.

Để làm cho nó hoạt động, mỗi cửa sổ như vậy sẽ chạy mã:

<input type="button" onclick="two();" value="Submit">

0

Đó là tất cả. Bây giờ họ có thể tương tác mà không có giới hạn. Một lần nữa, điều đó chỉ có thể cho các trang có cùng miền cấp hai.

Phản đối, nhưng vẫn hoạt động

Thuộc tính

function two() {
  alert('Thanks');
  document.body.innerHTML = '';
  setTimeout(() => {
window.location.href = 'https://www.w3schools.com';
},4000);
}

8 đang trong quá trình xóa khỏi đặc tả. Tin nhắn giữa cửa sổ (được giải thích ngay bên dưới) là sự thay thế được đề xuất.

Điều đó nói rằng, bây giờ tất cả các trình duyệt hỗ trợ nó. Và sự hỗ trợ sẽ được giữ cho tương lai, không phải phá vỡ mã cũ dựa trên

function two() {
  alert('Thanks');
  document.body.innerHTML = '';
  setTimeout(() => {
window.location.href = 'https://www.w3schools.com';
},4000);
}

8.

Iframe: Cạm bẫy tài liệu sai

Khi một iframe xuất phát từ cùng một nguồn gốc và chúng ta có thể truy cập

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

5 của nó, có một cạm bẫy. Nó không liên quan đến những thứ có nguồn gốc chéo, nhưng quan trọng cần biết.

Sau khi tạo ra một iframe ngay lập tức có một tài liệu. Nhưng tài liệu đó khác với tài liệu tải vào nó!

Vì vậy, nếu chúng ta làm điều gì đó với tài liệu ngay lập tức, điều đó có thể sẽ bị mất.

Ở đây, hãy nhìn xem:

<input type="button" onclick="two();" value="Submit">

1

Chúng ta không nên làm việc với tài liệu của một iframe chưa được tải, bởi vì đó là tài liệu sai. Nếu chúng tôi đặt bất kỳ trình xử lý sự kiện nào trên đó, họ sẽ bị bỏ qua.

Làm thế nào để phát hiện khoảnh khắc khi tài liệu ở đó?

Tài liệu phù hợp chắc chắn là tại chỗ khi

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

7 kích hoạt. Nhưng nó chỉ kích hoạt khi toàn bộ iframe với tất cả các tài nguyên được tải.

Chúng ta có thể cố gắng bắt gặp thời điểm sớm hơn bằng cách sử dụng séc trong

<input type="button" onclick="two();" value="Submit">

2:

<input type="button" onclick="two();" value="Submit">

2

Bộ sưu tập: Window.Frames

Một cách khác để có được một đối tượng cửa sổ cho

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2 - là lấy nó từ bộ sưu tập được đặt tên

<input type="button" onclick="two();" value="Submit">

4:

Theo số:
```
<input type="button" onclick="two();" value="Submit">
```
5 - Đối tượng cửa sổ cho khung đầu tiên trong tài liệu.

Theo tên:

<input type="button" onclick="two();" value="Submit">

6 - đối tượng cửa sổ cho khung với

<input type="button" onclick="two();" value="Submit">

7.

Ví dụ:

<input type="button" onclick="two();" value="Submit">

3

Một iframe có thể có các iframes khác bên trong. Các đối tượng

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

6 tương ứng tạo thành một hệ thống phân cấp.

Liên kết điều hướng là:

```
<input type="button" onclick="two();" value="Submit">
```
4 - Bộ sưu tập các cửa sổ trẻ em của trẻ em (cho các khung lồng nhau).

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

0 - Tham chiếu đến cửa sổ cha mẹ (bên ngoài).

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

1 - tham chiếu đến cửa sổ cha mẹ trên cùng.

Ví dụ:

<input type="button" onclick="two();" value="Submit">

4

Một iframe có thể có các iframes khác bên trong. Các đối tượng

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

6 tương ứng tạo thành một hệ thống phân cấp.

<input type="button" onclick="two();" value="Submit">

5

Liên kết điều hướng là:

<input type="button" onclick="two();" value="Submit">

4 - Bộ sưu tập các cửa sổ trẻ em của trẻ em (cho các khung lồng nhau).

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

0 - Tham chiếu đến cửa sổ cha mẹ (bên ngoài).

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

1 - tham chiếu đến cửa sổ cha mẹ trên cùng.

Chúng ta có thể sử dụng thuộc tính

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

2 để kiểm tra xem tài liệu hiện tại có mở bên trong khung hay không:

Thuộc tính của hộp cát sandbox

Thuộc tính

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

3 cho phép loại trừ các hành động nhất định bên trong

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2 để ngăn chặn việc thực thi mã không đáng tin cậy. Nó có thể sử dụng các hộp cát trên IFRAME bằng cách coi nó là xuất phát từ một nguồn gốc khác và/hoặc áp dụng các hạn chế khác.

Có một bộ phận mặc định của người Viking, các hạn chế được áp dụng cho

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

5. Nhưng nó có thể được nới lỏng nếu chúng tôi cung cấp một danh sách các hạn chế được phân tách không gian không nên được áp dụng làm giá trị của thuộc tính, như thế này:

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

6.

Nói cách khác, một thuộc tính

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

7 trống đặt các hạn chế nghiêm ngặt nhất có thể, nhưng chúng ta có thể đặt một danh sách phân loại không gian của những người mà chúng ta muốn nâng lên.

Ở đây, một danh sách các hạn chế:

<input type="button" onclick="two();" value="Submit">

7

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

8By mặc định

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

7 buộc chính sách nguồn gốc khác nhau của người dùng đối với iframe. Nói cách khác, nó làm cho trình duyệt coi

<!-- iframe from the same site -->
<iframe src="/" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // just do anything
    iframe.contentDocument.body.prepend("Hello, world!");
  };
</script>

0 là đến từ một nguồn gốc khác, ngay cả khi

<!-- iframe from the same site -->
<iframe src="/" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // just do anything
    iframe.contentDocument.body.prepend("Hello, world!");
  };
</script>

1 chỉ vào cùng một trang web. Với tất cả các hạn chế ngụ ý cho các tập lệnh. Tùy chọn này loại bỏ tính năng đó .________ 92 Tất cả các

<!-- iframe from the same site -->
<iframe src="/" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // just do anything
    iframe.contentDocument.body.prepend("Hello, world!");
  };
</script>

0 để thay đổi ________ 94 .____ 95 Tất cả các biểu mẫu từ ________ 90 .__ 97

Xem hướng dẫn để biết thêm.

Ví dụ dưới đây thể hiện một iframe được hộp cát với bộ hạn chế mặc định: <iframe src="https://example.com" id="iframe"></iframe> <script> iframe.onload = function() { // we can get the reference to the inner window let iframeWindow = iframe.contentWindow; // OK try { // ...but not to the document inside it let doc = iframe.contentDocument; // ERROR } catch(e) { alert(e); // Security Error (another origin) } // also we can't READ the URL of the page in iframe try { // Can't read URL from the Location object let href = iframe.contentWindow.location.href; // ERROR } catch(e) { alert(e); // Security Error } // ...we can WRITE into location (and thus load something else into the iframe)! iframe.contentWindow.location = '/'; // OK iframe.onload = null; // clear the handler, not to run it after the location change }; </script>5. Nó có một số JavaScript và một hình thức.

Xin lưu ý rằng không có gì hoạt động. Vì vậy, bộ mặc định thực sự rất khắc nghiệt:

<input type="button" onclick="two();" value="Submit">

6

Xin lưu ý:

Mục đích của thuộc tính <iframe src="https://example.com" id="iframe"></iframe> <script> iframe.onload = function() { // we can get the reference to the inner window let iframeWindow = iframe.contentWindow; // OK try { // ...but not to the document inside it let doc = iframe.contentDocument; // ERROR } catch(e) { alert(e); // Security Error (another origin) } // also we can't READ the URL of the page in iframe try { // Can't read URL from the Location object let href = iframe.contentWindow.location.href; // ERROR } catch(e) { alert(e); // Security Error } // ...we can WRITE into location (and thus load something else into the iframe)! iframe.contentWindow.location = '/'; // OK iframe.onload = null; // clear the handler, not to run it after the location change }; </script>7 chỉ để thêm nhiều hạn chế hơn. Nó không thể loại bỏ chúng. Cụ thể, nó có thể thư giãn các hạn chế cùng với nguồn gốc nếu iframe đến từ một nguồn gốc khác.

Tin nhắn chéo cửa sổ

Arguments:

Giao diện

<input type="button" onclick="two();" value="Submit">

04 cho phép Windows nói chuyện với nhau bất kể chúng đến từ nguồn gốc nào.

Vì vậy, nó là một cách xung quanh chính sách của nguồn gốc của người Viking. Nó cho phép một cửa sổ từ

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

6 nói chuyện với

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

7 và trao đổi thông tin, nhưng chỉ khi cả hai đều đồng ý và gọi các hàm JavaScript tương ứng. Điều đó làm cho nó an toàn cho người dùng.

Giao diện có hai phần.

Hậu sinh

<input type="button" onclick="two();" value="Submit">

8

Cửa sổ muốn gửi một thông báo gọi phương thức hậu kỳ của cửa sổ nhận. Nói cách khác, nếu chúng ta muốn gửi tin nhắn đến

<input type="button" onclick="two();" value="Submit">

07, chúng ta nên gọi

<input type="button" onclick="two();" value="Submit">

08.

<input type="button" onclick="two();" value="Submit">

9

<input type="button" onclick="two();" value="Submit">09 Dữ liệu để gửi. Có thể là bất kỳ đối tượng nào, dữ liệu được nhân bản bằng cách sử dụng thuật toán tuần tự hóa có cấu trúc trên mạng. IE chỉ hỗ trợ các chuỗi, vì vậy chúng ta nên <input type="button" onclick="two();" value="Submit">10 các đối tượng phức tạp để hỗ trợ trình duyệt đó .________ 111 chỉ định nguồn gốc cho cửa sổ đích, do đó chỉ có một cửa sổ từ nguồn gốc đã cho sẽ nhận được tin nhắn.

<input type="button" onclick="two();" value="Submit">

11 là một biện pháp an toàn. Hãy nhớ rằng, nếu cửa sổ đích đến từ một nguồn gốc khác, chúng ta có thể đọc

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

3 của nó trong cửa sổ người gửi. Vì vậy, chúng tôi có thể chắc chắn rằng trang web đang mở trong cửa sổ dự định ngay bây giờ: người dùng có thể điều hướng đi và cửa sổ người gửi không biết gì về nó.

Chỉ định

<input type="button" onclick="two();" value="Submit">

11 đảm bảo rằng cửa sổ chỉ nhận được dữ liệu nếu nó vẫn ở đúng trang web. Quan trọng khi dữ liệu nhạy cảm.

Chẳng hạn, ở đây

<input type="button" onclick="two();" value="Submit">

07 sẽ chỉ nhận được tin nhắn nếu nó có tài liệu từ gốc

<input type="button" onclick="two();" value="Submit">

16:

Nếu chúng tôi không muốn kiểm tra đó, chúng tôi có thể đặt

<input type="button" onclick="two();" value="Submit">

11 thành

<input type="button" onclick="two();" value="Submit">

18.

onmessage

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

0

Để nhận được một tin nhắn, cửa sổ đích sẽ có trình xử lý về sự kiện

<input type="button" onclick="two();" value="Submit">

19. Nó kích hoạt khi

<input type="button" onclick="two();" value="Submit">

04 được gọi (và kiểm tra

<input type="button" onclick="two();" value="Submit">

11 thành công).

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

1

function redirect() {
  document.querySelector('.thanks').classList.remove('thanks-hidden');
  setTimeout(() => {
    window.location.href = 'https://www.w3schools.com/';
  }, 3000); // Wait 3 seconds and then redirect.
}

2

Đối tượng sự kiện có các thuộc tính đặc biệt:

<input type="button" onclick="two();" value="Submit">

09 Dữ liệu từ ________ 104 .__ Chúng tôi có thể ngay lập tức

<input type="button" onclick="two();" value="Submit">

27 trở lại nếu chúng tôi muốn.

Để gán trình xử lý đó, chúng ta nên sử dụng

<input type="button" onclick="two();" value="Submit">

28, một cú pháp ngắn

<input type="button" onclick="two();" value="Submit">

29 không hoạt động.

Đây là một ví dụ:
Từ cửa sổ bật lên:
```
<input type="button" onclick="two();" value="Submit">
```
31 - là một tham chiếu đến cửa sổ mở từ cửa sổ bật lên.

Đối với IFRAME, chúng ta có thể truy cập các cửa sổ cha mẹ/trẻ em bằng cách sử dụng:

```
<input type="button" onclick="two();" value="Submit">
```
4 - một bộ sưu tập các đối tượng cửa sổ lồng nhau,

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

0,

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

1 là các tài liệu tham khảo về phụ huynh và cửa sổ trên cùng,

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

7 là cửa sổ bên trong thẻ

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

2.

Nếu Windows chia sẻ cùng một nguồn gốc (máy chủ, cổng, giao thức), thì Windows có thể làm bất cứ điều gì họ muốn với nhau.

Nếu không, chỉ có những hành động có thể là:

Thay đổi

<input type="button" onclick="redirect()" value="Submit">
<div class="thanks thanks-hidden"></div>

3 của một cửa sổ khác (truy cập chỉ ghi).

Đăng một tin nhắn cho nó.

Ngoại lệ là:

Windows chia sẻ cùng một miền cấp hai:
```
<input type="button" onclick="two();" value="Submit">
```
38 và
```
<input type="button" onclick="two();" value="Submit">
```
39. Sau đó, thiết lập
```
<input type="button" onclick="two();" value="Submit">
```
40 trong cả hai người đều đưa chúng vào trạng thái gốc cùng một nguồn gốc.

Nếu một iframe có thuộc tính

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

3, nó sẽ được đưa vào trạng thái nguồn gốc khác nhau, trừ khi

<iframe src="https://example.com" id="iframe"></iframe>

<script>
  iframe.onload = function() {
    // we can get the reference to the inner window
    let iframeWindow = iframe.contentWindow; // OK
    try {
      // ...but not to the document inside it
      let doc = iframe.contentDocument; // ERROR
    } catch(e) {
      alert(e); // Security Error (another origin)
    }

    // also we can't READ the URL of the page in iframe
    try {
      // Can't read URL from the Location object
      let href = iframe.contentWindow.location.href; // ERROR
    } catch(e) {
      alert(e); // Security Error
    }

    // ...we can WRITE into location (and thus load something else into the iframe)!
    iframe.contentWindow.location = '/'; // OK

    iframe.onload = null; // clear the handler, not to run it after the location change
  };
</script>

8 được chỉ định trong giá trị thuộc tính. Có thể được sử dụng để chạy mã không đáng tin cậy trong iframes từ cùng một trang web.

Giao diện

<input type="button" onclick="two();" value="Submit">

04 cho phép hai cửa sổ có bất kỳ nguồn gốc nào nói chuyện:

Người gửi gọi

<input type="button" onclick="two();" value="Submit">

44.

Nếu

<input type="button" onclick="two();" value="Submit">

11 không phải là

<input type="button" onclick="two();" value="Submit">

46, thì trình duyệt sẽ kiểm tra xem cửa sổ

<input type="button" onclick="two();" value="Submit">

47 có nguồn gốc

<input type="button" onclick="two();" value="Submit">

11.

Nếu nó là như vậy, thì
```
<input type="button" onclick="two();" value="Submit">
```
47 sẽ kích hoạt sự kiện
```
<input type="button" onclick="two();" value="Submit">
```
19 với các thuộc tính đặc biệt:
- ```
<input type="button" onclick="two();" value="Submit">
```
  24 - Nguồn gốc của cửa sổ người gửi (như
```
<input type="button" onclick="two();" value="Submit">
```
  52)
- ```
<input type="button" onclick="two();" value="Submit">
```
  26 - Tham chiếu đến cửa sổ người gửi.
- ```
<input type="button" onclick="two();" value="Submit">
```
  09 - Dữ liệu, bất kỳ đối tượng nào ở mọi nơi ngoại trừ IE chỉ hỗ trợ các chuỗi.
Chúng ta nên sử dụng
```
<input type="button" onclick="two();" value="Submit">
```
28 để đặt trình xử lý cho sự kiện này bên trong cửa sổ đích.