HTMLScriptElement
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Các phần tử HTML <script> hiển thị giao diện HTMLScriptElement, cung cấp các thuộc tính và phương thức đặc biệt để thao tác hành vi và việc thực thi của các phần tử <script> (ngoài giao diện HTMLElement được kế thừa).
Các tệp JavaScript nên được phục vụ với kiểu MIME text/javascript, nhưng trình duyệt khá linh hoạt và chỉ chặn chúng nếu script được phục vụ với kiểu ảnh (image/*), kiểu video (video/*), kiểu âm thanh (audio/*), hoặc text/csv. Nếu script bị chặn, phần tử của nó sẽ nhận sự kiện error; nếu không, nó sẽ nhận sự kiện load.
Note:
Khi được chèn bằng phương thức Document.write(), các phần tử <script> sẽ được thực thi (thường là đồng bộ), nhưng khi được chèn bằng Element.innerHTML hoặc Element.outerHTML, chúng hoàn toàn không được thực thi.
Thuộc tính thể hiện
Kế thừa thuộc tính từ phần tử cha, HTMLElement.
HTMLScriptElement.attributionSrcSecure context Deprecated-
Lấy và đặt thuộc tính
attributionsrctrên phần tử<script>theo chương trình, phản ánh giá trị của thuộc tính đó.attributionsrcchỉ định rằng bạn muốn trình duyệt gửi tiêu đềAttribution-Reporting-Eligiblecùng với yêu cầu tài nguyên script. Ở phía máy chủ, tiêu đề này được dùng để kích hoạt việc gửiAttribution-Reporting-Register-SourcehoặcAttribution-Reporting-Register-Triggertrong phản hồi, để đăng ký nguồn phân bổ hoặc kích hoạt phân bổ dựa trên JavaScript. HTMLScriptElement.async-
Giá trị boolean điều khiển cách script được thực thi. Với classic scripts, nếu thuộc tính
asyncđược đặt thànhtrue, script ngoài sẽ được tìm nạp song song với quá trình phân tích cú pháp và được đánh giá ngay khi sẵn sàng. Với module scripts, nếuasynclàtrue, script và toàn bộ phụ thuộc của nó sẽ được tìm nạp song song với quá trình phân tích cú pháp và được đánh giá ngay khi sẵn sàng. HTMLScriptElement.blocking-
Chuỗi chỉ ra rằng một số thao tác nhất định nên bị chặn trong lúc tìm nạp script. Nó phản ánh thuộc tính
blockingcủa phần tử<script>. HTMLScriptElement.charsetDeprecated-
Chuỗi biểu thị mã hóa ký tự của một script ngoài. Nó phản ánh thuộc tính
charset. HTMLScriptElement.crossOrigin-
Chuỗi phản ánh cấu hình CORS cho phần tử script. Với classic scripts từ các origin khác, thuộc tính này điều khiển việc thông tin lỗi có được hiển thị hay không.
HTMLScriptElement.defer-
Giá trị boolean điều khiển cách script được thực thi. Với classic scripts, nếu thuộc tính
deferđược đặt thànhtrue, script ngoài sẽ được thực thi sau khi tài liệu đã được phân tích xong, nhưng trước khi sự kiệnDOMContentLoadedđược phát ra. Với module scripts, thuộc tínhdeferkhông có tác dụng. HTMLScriptElement.eventDeprecated-
Chuỗi; một cách lỗi thời để đăng ký trình xử lý sự kiện trên phần tử trong tài liệu HTML.
HTMLScriptElement.fetchPriority-
Chuỗi tùy chọn biểu thị gợi ý cho trình duyệt về cách nó nên ưu tiên tìm nạp một script ngoài so với các script ngoài khác. Nếu giá trị này được cung cấp, nó phải là một trong các giá trị cho phép:
highđể tìm nạp với ưu tiên cao,lowđể tìm nạp với ưu tiên thấp, hoặcautođể cho biết không có ưu tiên nào (đây là mặc định). Nó phản ánh thuộc tínhfetchprioritycủa phần tử<script>. HTMLScriptElement.innerText-
Thuộc tính biểu diễn nội dung văn bản nội tuyến của phần tử
<script>như thể nó là văn bản đã được hiển thị. Thuộc tính này chấp nhận một đối tượngTrustedScripthoặc một chuỗi. HTMLScriptElement.integrity-
Chuỗi chứa siêu dữ liệu nội tuyến mà trình duyệt có thể dùng để xác minh rằng tài nguyên đã được tìm nạp và không bị can thiệp ngoài mong muốn. Nó phản ánh thuộc tính
integritycủa phần tử<script>. HTMLScriptElement.noModule-
Giá trị boolean nếu là
truesẽ ngăn script được thực thi trong các trình duyệt hỗ trợ ES modules - dùng để chạy script dự phòng trong các trình duyệt cũ không hỗ trợ JavaScript modules. HTMLScriptElement.referrerPolicy-
Chuỗi phản ánh thuộc tính HTML
referrerPolicy, cho biết referrer nào sẽ được dùng khi tìm nạp script và các lần tìm nạp do script đó thực hiện. HTMLScriptElement.src-
TrustedScriptURLhoặc chuỗi biểu thị URL của một script ngoài; có thể dùng như một lựa chọn thay thế cho việc nhúng script trực tiếp trong tài liệu. Nó phản ánh thuộc tínhsrccủa phần tử<script>. HTMLScriptElement.text-
Thuộc tính biểu diễn nội dung văn bản nội tuyến của phần tử
<script>. Thuộc tính này chấp nhận một đối tượngTrustedScripthoặc một chuỗi. Nó hoạt động giống như thuộc tínhtextContent. HTMLScriptElement.textContent-
Thuộc tính biểu diễn nội dung văn bản nội tuyến của phần tử
<script>. Thuộc tính này được định nghĩa lại từNodeđể hỗ trợTrustedScriptnhư đầu vào. Trên phần tử này, nó hoạt động chính xác như thuộc tínhtext. HTMLScriptElement.type-
Chuỗi biểu thị kiểu của script. Nó phản ánh thuộc tính
typecủa phần tử<script>.
Phương thức tĩnh
HTMLScriptElement.supports()-
Trả về
truenếu trình duyệt hỗ trợ script của kiểu đã chỉ định vàfalsenếu không. Phương thức này cung cấp một cơ chế đơn giản và thống nhất để phát hiện tính năng liên quan đến script.
Phương thức thể hiện
Không có phương thức cụ thể; kế thừa phương thức từ phần tử cha, HTMLElement.
Sự kiện
Không có sự kiện cụ thể; kế thừa sự kiện từ phần tử cha, HTMLElement.
Ví dụ
>Nhập script động
Hãy tạo một hàm nhập các script mới trong tài liệu bằng cách tạo một nút <script> ngay trước phần tử <script> đang chứa đoạn mã sau (thông qua document.currentScript).
Các script này sẽ được thực thi bất đồng bộ.
Để biết thêm chi tiết, xem các thuộc tính defer và async.
function loadError(oError) {
throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}
function prefixScript(url, onloadFunction) {
const newScript = document.createElement("script");
newScript.onerror = loadError;
if (onloadFunction) {
newScript.onload = onloadFunction;
}
document.currentScript.parentNode.insertBefore(
newScript,
document.currentScript,
);
newScript.src = url;
}
Hàm tiếp theo, thay vì chèn các script mới ngay trước phần tử document.currentScript, sẽ nối chúng như con của thẻ <head>.
function loadError(oError) {
throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}
function affixScriptToHead(url, onloadFunction) {
const newScript = document.createElement("script");
newScript.onerror = loadError;
if (onloadFunction) {
newScript.onload = onloadFunction;
}
document.head.appendChild(newScript);
newScript.src = url;
}
Ví dụ sử dụng:
affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
alert('The script "myScript2.js" has been correctly loaded.');
});
Kiểm tra một kiểu script có được hỗ trợ hay không
HTMLScriptElement.supports() cung cấp một cơ chế thống nhất để kiểm tra liệu trình duyệt có hỗ trợ các kiểu script cụ thể hay không.
Ví dụ dưới đây cho thấy cách kiểm tra hỗ trợ module, dùng sự tồn tại của thuộc tính noModule làm phương án dự phòng.
function checkModuleSupport() {
if ("supports" in HTMLScriptElement) {
return HTMLScriptElement.supports("module");
}
return "noModule" in document.createElement("script");
}
Classic scripts được giả định là được hỗ trợ trên mọi trình duyệt.
Đặc tả kỹ thuật
| Specification |
|---|
| HTML> # htmlscriptelement> |
Tương thích trình duyệt
Xem thêm
- Phần tử HTML
<script> - Phần tử HTML
<noscript> document.currentScript- Web Workers (các đoạn mã tương tự script nhưng được thực thi trong ngữ cảnh toàn cục khác)