Hướng dẫn how do i open another html in html? - làm cách nào để mở một html khác trong html?

W3.js khá tuyệt.

https://www.w3schools.com/lib/w3.js

Và chúng tôi tập trung

w3-include-html

Nhưng hãy xem xét trường hợp dưới đây

- 🧾 popup.html
- 🧾 popup.js
- 🧾 include.js
- 📂 partials 
   - 📂 head
         - 🧾 bootstrap-css.html
         - 🧾 fontawesome-css.html
         - 🧾 all-css.html
   - 🧾 hello-world.html

Hello World

Script

// include.js

const INCLUDE_TAG_NAME = `data-include-html`

/**
 * @param {Element} node
 * @param {Function} cb callback
 * */
export async function includeHTML(node, {
  cb = undefined
}) {
  const nodeArray = node === undefined ?
    document.querySelectorAll(`[${INCLUDE_TAG_NAME}]`) :
    node.querySelectorAll(`[${INCLUDE_TAG_NAME}]`)

  if (nodeArray === null) {
    return
  }

  for (const node of nodeArray) {
    const filePath = node.getAttribute(`${INCLUDE_TAG_NAME}`)
    if (filePath === undefined) {
      return
    }

    await new Promise(resolve => {
      fetch(filePath
      ).then(async response => {
          const text = await response.text()
          if (!response.ok) {
            throw Error(`${response.statusText} (${response.status}) | ${text} `)
          }
          node.innerHTML = text
          const rootPath = filePath.split("/").slice(0, -1)
          node.querySelectorAll(`[${INCLUDE_TAG_NAME}]`).forEach(elem=>{
            const relativePath = elem.getAttribute(`${INCLUDE_TAG_NAME}`) // not support ".."
            if(relativePath.startsWith('/')) { // begin with site root.
              return
            }
            elem.setAttribute(`${INCLUDE_TAG_NAME}`, [...rootPath, relativePath].join("/"))
          })
          node.removeAttribute(`${INCLUDE_TAG_NAME}`)
          await includeHTML(node, {cb})
          node.replaceWith(...node.childNodes) // https://stackoverflow.com/a/45657273/9935654
          resolve()
        }
      ).catch(err => {
        node.innerHTML = `${err.message}`
        resolve()
      })
    })
  }

  if (cb) {
    cb()
  }
}

// popup.js

import * as include from "include.js"

window.onload = async () => {
  await include.includeHTML(undefined, {})
  // ...
}

đầu ra

Hello World

Tìm hiểu làm thế nào để bao gồm các đoạn trích HTML trong HTML.

HTML

Lưu HTML bạn muốn đưa vào tệp .html:

content.html

Google Maps Nút hoạt hình Box Modal Hộp hoạt hình Tiến trình Thanh treo lơ lửng nhấp vào Dropdowns Bảng đáp ứng bảng
Animated Buttons

Modal Boxes

Animations

Progress Bars

Hover Dropdowns

Click Dropdowns

Responsive Tables

Bao gồm HTML

Bao gồm HTML được thực hiện bằng cách sử dụng thuộc tính W3-Include-HTML:w3-include-html attribute:

Thí dụ

Hãy tự mình thử »

Làm cách nào để truy cập vào tệp HTML khác trong HTML?

Thí dụ

Cuộc gọi bao gồmhtml () ở cuối trang:

Bao gồm nhiều đoạn trích HTML

Bạn có thể bao gồm bất kỳ số lượng đoạn trích HTML nào:

Thí dụ

Hãy tự mình thử »

Làm cách nào để truy cập vào tệp HTML khác trong HTML?

Làm cách nào để hiển thị một trang HTML sang trang HTML khác?

Làm cách nào để mở một trang HTML từ một trang khác?