Làm cách nào để nhúng một trang web vào một trang web html khác?

Một lịch sử ngắn của nhúng

Cách đây rất lâu trên Web, việc sử dụng khung để tạo trang web đã trở nên phổ biến — các phần nhỏ của trang web được lưu trữ trong các trang HTML riêng lẻ. Chúng được nhúng trong một tài liệu chính gọi là bộ khung, cho phép bạn chỉ định khu vực trên màn hình mà mỗi khung được lấp đầy, giống như định cỡ các cột và hàng của bảng. Đây được coi là đỉnh cao của sự tuyệt vời vào giữa đến cuối những năm 90 và có bằng chứng cho thấy việc chia một trang web thành các phần nhỏ hơn như thế này sẽ tốt hơn cho tốc độ tải xuống — đặc biệt đáng chú ý là khi đó các kết nối mạng quá chậm. Tuy nhiên, chúng có nhiều vấn đề, vượt xa mọi mặt tích cực khi tốc độ mạng nhanh hơn, vì vậy bạn không thấy chúng được sử dụng nữa

Một thời gian ngắn sau [cuối những năm 90, đầu những năm 2000], các công nghệ plugin trở nên rất phổ biến, chẳng hạn như Java Applet và Flash — những công nghệ này cho phép các nhà phát triển web nhúng nội dung phong phú vào các trang web như video và hoạt ảnh, những thứ không có sẵn thông qua HTML. Việc nhúng các công nghệ này đã đạt được thông qua các yếu tố như

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Cuối cùng, phần tử ________ 33 xuất hiện [cùng với các cách nhúng nội dung khác, chẳng hạn như ________ 15, ________ 16, v.v. ] Điều này cung cấp một cách để nhúng toàn bộ tài liệu web vào bên trong một tài liệu khác, như thể đó là một

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Với bài học lịch sử đã hết, chúng ta hãy tiếp tục và xem cách sử dụng một số trong số này

học tích cực. sử dụng nhúng cổ điển

Trong bài viết này, chúng ta sẽ đi thẳng vào phần học tích cực, để ngay lập tức cung cấp cho bạn ý tưởng thực sự về công nghệ nhúng hữu ích cho việc gì. Thế giới trực tuyến rất quen thuộc với YouTube, nhưng nhiều người không biết về một số tiện ích chia sẻ mà YouTube có sẵn. Hãy xem cách YouTube cho phép chúng tôi nhúng video vào bất kỳ trang nào chúng tôi muốn bằng cách sử dụng

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

1. Trước tiên, hãy truy cập YouTube và tìm một video bạn thích
2. Bên dưới video, bạn sẽ tìm thấy nút Chia sẻ — hãy chọn nút này để hiển thị các tùy chọn chia sẻ
3. Chọn nút Nhúng và bạn sẽ nhận được một số mã

   html {
     font-family: sans-serif;
   }
   
   h2 {
     font-size: 16px;
   }
   
   .a11y-label {
     margin: 0;
     text-align: right;
     font-size: 0.7rem;
     width: 98%;
   }
   
   body {
     margin: 10px;
     background: #f5f9fa;
   }
   

   3 — hãy sao chép mã này
4. Chèn nó vào hộp Nhập bên dưới và xem kết quả ở Đầu ra là gì

Để có điểm thưởng, bạn cũng có thể thử nhúng Google Map vào ví dụ

1. Truy cập Google Maps và tìm bản đồ bạn thích
2. Nhấp vào "Menu Hamburger" [ba đường kẻ ngang] ở trên cùng bên trái của giao diện người dùng
3. Chọn tùy chọn Chia sẻ hoặc nhúng bản đồ
4. Chọn tùy chọn Nhúng bản đồ, tùy chọn này sẽ cung cấp cho bạn một số mã

   html {
     font-family: sans-serif;
   }
   
   h2 {
     font-size: 16px;
   }
   
   .a11y-label {
     margin: 0;
     text-align: right;
     font-size: 0.7rem;
     width: 98%;
   }
   
   body {
     margin: 10px;
     background: #f5f9fa;
   }
   

   3 — sao chép mã này
5. Chèn nó vào hộp Nhập bên dưới và xem kết quả ở Đầu ra là gì

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

Live output



Editable code

  Press Esc to move focus away from the code area [Tab inserts a tab character].





  
  

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById['code'];
const reset = document.getElementById['reset'];
const solution = document.getElementById['solution'];
const output = document.querySelector['.output'];
let code = textarea.value;
let userEntry = textarea.value;

function updateCode[] {
  output.innerHTML = textarea.value;
}

reset.addEventListener['click', function[] {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode[];
}];

solution.addEventListener['click', function[] {
  if [solution.value === 'Show solution'] {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode[];
}];

const htmlSolution = '\n\n\n\n';
let solutionEntry = htmlSolution;

textarea.addEventListener['input', updateCode];
window.addEventListener['load', updateCode];

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function[e]{
  if [e.keyCode === 9] {
    e.preventDefault[];
    insertAtCaret['\t'];
  }

  if [e.keyCode === 27] {
    textarea.blur[];
  }
};

function insertAtCaret[text] {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring[0, caretPos];
  const back = textarea.value.substring[textarea.selectionEnd, textarea.value.length];
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus[];
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function[]{
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if [solution.value === 'Show solution'] {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode[];
};

iframe chi tiết

Vì vậy, đó là dễ dàng và thú vị, phải không? . Điều này thật tuyệt vời khi kết hợp nội dung của bên thứ ba vào trang web của bạn mà bạn có thể không có quyền kiểm soát trực tiếp và không muốn triển khai phiên bản của riêng mình — chẳng hạn như video từ nhà cung cấp video trực tuyến, hệ thống nhận xét như Disqus, bản đồ từ trực tuyến . Các ví dụ trực tiếp có thể chỉnh sửa mà bạn đã sử dụng trong suốt khóa học này được triển khai bằng cách sử dụng

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Có một số lo ngại nghiêm trọng về Bảo mật cần xem xét với

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

Ví dụ này bao gồm các yếu tố cơ bản cần thiết để sử dụng một

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById['code'];
const reset = document.getElementById['reset'];
const solution = document.getElementById['solution'];
const output = document.querySelector['.output'];
let code = textarea.value;
let userEntry = textarea.value;

function updateCode[] {
  output.innerHTML = textarea.value;
}

reset.addEventListener['click', function[] {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode[];
}];

solution.addEventListener['click', function[] {
  if [solution.value === 'Show solution'] {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode[];
}];

const htmlSolution = '\n\n\n\n';
let solutionEntry = htmlSolution;

textarea.addEventListener['input', updateCode];
window.addEventListener['load', updateCode];

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function[e]{
  if [e.keyCode === 9] {
    e.preventDefault[];
    insertAtCaret['\t'];
  }

  if [e.keyCode === 27] {
    textarea.blur[];
  }
};

function insertAtCaret[text] {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring[0, caretPos];
  const back = textarea.value.substring[textarea.selectionEnd, textarea.value.length];
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus[];
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function[]{
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if [solution.value === 'Show solution'] {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode[];
};

Nếu được sử dụng,

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById['code'];
const reset = document.getElementById['reset'];
const solution = document.getElementById['solution'];
const output = document.querySelector['.output'];
let code = textarea.value;
let userEntry = textarea.value;

function updateCode[] {
  output.innerHTML = textarea.value;
}

reset.addEventListener['click', function[] {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode[];
}];

solution.addEventListener['click', function[] {
  if [solution.value === 'Show solution'] {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode[];
}];

const htmlSolution = '\n\n\n\n';
let solutionEntry = htmlSolution;

textarea.addEventListener['input', updateCode];
window.addEventListener['load', updateCode];

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function[e]{
  if [e.keyCode === 9] {
    e.preventDefault[];
    insertAtCaret['\t'];
  }

  if [e.keyCode === 27] {
    textarea.blur[];
  }
};

function insertAtCaret[text] {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring[0, caretPos];
  const back = textarea.value.substring[textarea.selectionEnd, textarea.value.length];
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus[];
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function[]{
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if [solution.value === 'Show solution'] {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode[];
};

Nếu được đặt, thì có thể đặt

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

Thuộc tính này, như với

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

Các thuộc tính này chỉ định chiều rộng và chiều cao mà bạn muốn iframe là

Cũng giống như các yếu tố tương tự khác như

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

Thuộc tính này hoạt động trong các trình duyệt hiện đại hơn một chút so với các tính năng còn lại của

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Ghi chú. Để cải thiện tốc độ, bạn nên đặt thuộc tính

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

mối quan tâm an ninh

Ở trên, chúng tôi đã đề cập đến những lo ngại về bảo mật - bây giờ chúng ta hãy đi vào vấn đề này chi tiết hơn một chút. Chúng tôi không mong đợi bạn hiểu hoàn toàn tất cả nội dung này ngay lần đầu tiên; . Ngoài ra, không cần phải sợ hãi và không sử dụng

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Các nhà sản xuất trình duyệt và nhà phát triển Web đã học được một cách khó khăn rằng iframe là mục tiêu phổ biến [thuật ngữ chính thức. véc tơ tấn công] để những người xấu trên Web [thường được gọi là tin tặc hoặc chính xác hơn là kẻ bẻ khóa] tấn công nếu họ đang cố sửa đổi trang web của bạn theo cách ác ý hoặc lừa mọi người làm điều gì đó mà họ không muốn làm, chẳng hạn như tiết lộ nội dung nhạy cảm . Do đó, các kỹ sư thông số kỹ thuật và nhà phát triển trình duyệt đã phát triển nhiều cơ chế bảo mật khác nhau để làm cho

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Ghi chú. Clickjacking là một kiểu tấn công khung nội tuyến phổ biến trong đó tin tặc nhúng một khung nội tuyến vô hình vào tài liệu của bạn [hoặc nhúng tài liệu của bạn vào trang web độc hại của riêng chúng] và sử dụng nó để thu thập các tương tác của người dùng. Đây là cách phổ biến để đánh lừa người dùng hoặc đánh cắp dữ liệu nhạy cảm

Tuy nhiên, một ví dụ nhanh trước tiên — hãy thử tải ví dụ trước mà chúng tôi đã trình bày ở trên vào trình duyệt của bạn — bạn có thể tìm thấy nó trực tiếp trên GitHub [cũng xem mã nguồn. ] Thay vì trang bạn mong đợi, có thể bạn sẽ thấy một số loại thông báo có nội dung "Tôi không thể mở trang này" và nếu bạn xem Bảng điều khiển trong các công cụ dành cho nhà phát triển trình duyệt, bạn sẽ thấy một thông báo . Trong Firefox, bạn sẽ nhận được thông báo như Đang tải "https. // nhà phát triển. mozilla. org/en-US/docs/Glossary" trong một khung bị từ chối bởi lệnh "X-Frame-Options" được đặt thành "DENY". Điều này là do các nhà phát triển xây dựng MDN đã bao gồm một cài đặt trên máy chủ phục vụ các trang web để không cho phép chúng được nhúng bên trong các

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Chỉ nhúng khi cần thiết

Đôi khi, việc nhúng nội dung của bên thứ ba — như video trên youtube và bản đồ — nhưng bạn có thể đỡ phải đau đầu hơn nếu chỉ nhúng nội dung của bên thứ ba khi thực sự cần thiết. Một nguyên tắc tốt cho bảo mật web là "Bạn không bao giờ có thể quá thận trọng. Nếu bạn đã thực hiện nó, hãy kiểm tra lại nó. Nếu ai đó đã làm nó, hãy cho rằng nó nguy hiểm cho đến khi được chứng minh ngược lại. "

Bên cạnh bảo mật, bạn cũng nên lưu ý vấn đề sở hữu trí tuệ. Hầu hết nội dung đều có bản quyền, ngoại tuyến và trực tuyến, kể cả nội dung bạn có thể không mong đợi [ví dụ: hầu hết hình ảnh trên Wikimedia Commons]. Không bao giờ hiển thị nội dung trên trang web của bạn trừ khi bạn sở hữu nội dung đó hoặc chủ sở hữu đã cấp cho bạn sự cho phép rõ ràng bằng văn bản. Hình phạt cho hành vi vi phạm bản quyền là nghiêm trọng. Một lần nữa, bạn không bao giờ có thể quá thận trọng

Nếu nội dung được cấp phép, bạn phải tuân thủ các điều khoản cấp phép. Ví dụ: nội dung trên MDN được cấp phép theo CC-BY-SA. Điều đó có nghĩa là bạn phải ghi có cho chúng tôi khi bạn trích dẫn nội dung của chúng tôi, ngay cả khi bạn thực hiện những thay đổi đáng kể

Sử dụng HTTPS

HTTPS là phiên bản được mã hóa của HTTP. Bạn nên phục vụ các trang web của mình bằng HTTPS bất cứ khi nào có thể

1. HTTPS giảm khả năng nội dung từ xa bị giả mạo trong quá trình chuyển tiếp,
2. HTTPS ngăn nội dung được nhúng truy cập vào nội dung trong tài liệu gốc của bạn và ngược lại

Kích hoạt HTTPS trang web của bạn yêu cầu cài đặt chứng chỉ bảo mật đặc biệt. Nhiều nhà cung cấp dịch vụ lưu trữ cung cấp dịch vụ lưu trữ hỗ trợ HTTPS mà bạn không cần phải tự thực hiện bất kỳ thiết lập nào để đặt chứng chỉ tại chỗ. Nhưng nếu bạn cần tự thiết lập hỗ trợ HTTPS cho trang web của mình, Let's Encrypt cung cấp các công cụ và hướng dẫn mà bạn có thể sử dụng để tự động tạo và cài đặt chứng chỉ cần thiết — với sự hỗ trợ tích hợp sẵn dành cho các máy chủ web được sử dụng rộng rãi nhất, bao gồm . Công cụ Let's Encrypt được thiết kế để làm cho quy trình trở nên dễ dàng nhất có thể, vì vậy thực sự không có lý do chính đáng nào để tránh sử dụng nó hoặc các phương tiện có sẵn khác để hỗ trợ HTTPS cho trang web của bạn

Ghi chú. Các trang GitHub cho phép nội dung được cung cấp qua HTTPS theo mặc định, vì vậy nó rất hữu ích cho việc lưu trữ nội dung. Nếu bạn đang sử dụng một nhà cung cấp dịch vụ lưu trữ khác và không chắc chắn, hãy hỏi họ về điều đó

Luôn sử dụng thuộc tính

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

9

Bạn muốn cung cấp cho những kẻ tấn công ít quyền nhất có thể để thực hiện những điều xấu trên trang web của mình, do đó, bạn chỉ nên cấp cho nội dung được nhúng các quyền cần thiết để thực hiện công việc của nó. Tất nhiên, điều này cũng áp dụng cho nội dung của riêng bạn. Một thùng chứa mã mà nó có thể được sử dụng một cách thích hợp — hoặc để thử nghiệm — nhưng không thể gây ra bất kỳ tác hại nào đối với phần còn lại của cơ sở mã [dù vô tình hay độc hại] được gọi là sandbox

Nội dung không có hộp cát có thể làm quá nhiều việc [thực thi JavaScript, gửi biểu mẫu, cửa sổ bật lên, v.v. ] Theo mặc định, bạn nên áp đặt tất cả các hạn chế có sẵn bằng cách sử dụng thuộc tính

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

Nếu thực sự cần thiết, bạn có thể thêm lại từng quyền một [bên trong giá trị thuộc tính

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

Ghi chú. Hộp cát không bảo vệ nếu kẻ tấn công có thể đánh lừa mọi người truy cập trực tiếp vào nội dung độc hại [bên ngoài

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Định cấu hình chỉ thị CSP

CSP là viết tắt của chính sách bảo mật nội dung và cung cấp một bộ Tiêu đề HTTP [siêu dữ liệu được gửi cùng với các trang web của bạn khi chúng được cung cấp từ máy chủ web] được thiết kế để cải thiện tính bảo mật cho tài liệu HTML của bạn. Khi cần bảo mật các

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Ghi chú. Bạn có thể đọc bài đăng của Frederik Braun Trên tiêu đề bảo mật tùy chọn khung X để biết thêm thông tin cơ bản về chủ đề này. Rõ ràng, nó nằm ngoài phạm vi giải thích đầy đủ trong bài viết này

The and elements

Các phần tử

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Tuy nhiên, bạn không có khả năng sử dụng các yếu tố này nhiều. Nếu bạn cần hiển thị các tệp PDF, tốt hơn hết là liên kết với chúng thay vì nhúng chúng vào trang

Trong lịch sử, các yếu tố này cũng đã được sử dụng để nhúng nội dung được xử lý bởi các plugin trình duyệt như Adobe Flash, nhưng công nghệ này hiện đã lỗi thời và không được hỗ trợ bởi các trình duyệt hiện đại

Nếu bạn thấy mình cần nhúng nội dung phần bổ trợ, thì đây là loại thông tin tối thiểu bạn sẽ cần

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

  
    iframe {
      border: none;
    }
  


  
    
      
        Fallback link for browsers that don't support iframes
      
    
  

Hãy xem một ví dụ về

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Các tệp PDF là bước đệm cần thiết giữa giấy và kỹ thuật số, nhưng chúng đặt ra nhiều thách thức về khả năng truy cập và có thể khó đọc trên màn hình nhỏ. Chúng vẫn có xu hướng phổ biến trong một số vòng kết nối, nhưng tốt hơn hết là liên kết với chúng để có thể tải xuống hoặc đọc chúng trên một trang riêng biệt, thay vì nhúng chúng vào một trang web

Kiểm tra kỹ năng của bạn

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Đa phương tiện và nhúng

Bản tóm tắt

Chủ đề nhúng nội dung khác vào tài liệu web có thể nhanh chóng trở nên rất phức tạp, vì vậy trong bài viết này, chúng tôi đã cố gắng giới thiệu nó theo cách đơn giản, quen thuộc mà sẽ có vẻ phù hợp ngay lập tức, đồng thời gợi ý về một số tính năng nâng cao hơn của . Để bắt đầu, bạn không thể sử dụng tính năng nhúng cho nhiều mục đích khác ngoài việc bao gồm nội dung của bên thứ ba như bản đồ và video trên các trang của bạn. Tuy nhiên, khi bạn trở nên có kinh nghiệm hơn, bạn có thể bắt đầu tìm thấy nhiều cách sử dụng hơn cho chúng.

Có nhiều công nghệ khác liên quan đến việc nhúng nội dung bên ngoài bên cạnh những công nghệ chúng ta đã thảo luận ở đây. Chúng tôi đã thấy một số trong các bài viết trước, chẳng hạn như

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

Bạn có thể nhúng toàn bộ trang web không?

Bạn có thể có một trang web trong một trang web?