Hướng dẫn add script tag to html using javascript - thêm thẻ script vào html bằng javascript

Tôi muốn tự động bao gồm một thẻ tập lệnh trong một trang web tuy nhiên tôi không kiểm soát được SRC vì vậy src = "Source.js" có thể trông như thế này.

document.write('')
document.write('
goodbye world
')

Bây giờ thường đặt

Trong đầu hoạt động tốt nhưng có cách nào khác tôi có thể thêm

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

4 tự động bằng cách sử dụng một cái gì đó như

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

5 không?

jsfiddle về những gì tôi đã thử

GầnHusCarl

51.1K12 Huy hiệu vàng201 Huy hiệu bạc185 Huy hiệu đồng12 gold badges201 silver badges185 bronze badges

hỏi ngày 29 tháng 10 năm 2012 lúc 12:47Oct 29, 2012 at 12:47

Cadell Christocadell ChristoCadell Christo

2.9453 Huy hiệu vàng20 Huy hiệu bạc19 Huy hiệu đồng3 gold badges20 silver badges19 bronze badges

2

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

Đã trả lời ngày 29 tháng 10 năm 2012 lúc 12:51Oct 29, 2012 at 12:51

1

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

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

6 như thế này:

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}

Đã trả lời ngày 29 tháng 10 năm 2012 lúc 12:51Oct 29, 2012 at 12:51

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

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

6 như thế này:Sirko

Sirkosirko19 gold badges144 silver badges178 bronze badges

3

71K19 Huy hiệu vàng144 Huy hiệu bạc178 Huy hiệu đồng

function addScript( src, callback ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  s.onload=callback;
  document.body.appendChild( s );
}

Có chức năng

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

7, có thể được gọi khi tập lệnh đã tải thành công:

Simhumileco16 gold badges130 silver badges108 bronze badges

29.1k16 Huy hiệu vàng130 Huy hiệu bạc108 Huy hiệu đồngDec 14, 2014 at 10:41

Đã trả lời ngày 14 tháng 12 năm 2014 lúc 10:41MSS

MSSMSS24 silver badges28 bronze badges

0

3,40224 Huy hiệu bạc28 Huy hiệu đồng

function scriptLoader(scripts, callback) {

    var count = scripts.length;

    function urlCallback(url) {
        return function () {
            console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
            if (count < 1) {
                callback();
            }
        };
    }

    function loadScript(url) {
        var s = document.createElement('script');
        s.setAttribute('src', url);
        s.onload = urlCallback(url);
        document.head.appendChild(s);
    }

    for (var script of scripts) {
        loadScript(script);
    }
};

usage:

scriptLoader(['a.js','b.js'], function() {
    // use code from a.js or b.js
});

Một kịch bản nhỏ đẹp mà tôi đã viết để tải nhiều tập lệnh:Jun 19, 2016 at 9:04

Đã trả lời ngày 19 tháng 6 năm 2016 lúc 9:04EliSherer

Elishererelisherer1 gold badge15 silver badges29 bronze badges

1

1.5191 Huy hiệu vàng15 Huy hiệu bạc29 Huy hiệu đồng

function addScript(src) {
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');

    s.setAttribute('src', src);
    s.addEventListener('load', resolve);
    s.addEventListener('error', reject);

    document.body.appendChild(s);
  });
}

Gần một thập kỷ sau và không ai làm phiền khi viết phiên bản var my_awesome_script = document.createElement('script'); my_awesome_script.setAttribute('src','http://example.com/site.js'); document.head.appendChild(my_awesome_script); 8, vì vậy đây là của tôi (dựa trên Awnser này):

Cách sử dụng

________số 8Oct 18, 2021 at 12:45

Đã trả lời ngày 18 tháng 10 năm 2021 lúc 12:45NearHuscarl

51.1K12 Huy hiệu vàng201 Huy hiệu bạc185 Huy hiệu đồng12 gold badges201 silver badges185 bronze badges

hỏi ngày 29 tháng 10 năm 2012 lúc 12:47

Cadell Christocadell Christo

var scriptElm = document.createElement('script');
scriptElm.src = 'source.js';
document.body.appendChild(scriptElm);

2.9453 Huy hiệu vàng20 Huy hiệu bạc19 Huy hiệu đồng

Đã trả lời ngày 29 tháng 10 năm 2012 lúc 12:51

0

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

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

6 như thế này:Dec 26, 2019 at 12:19

SirkosirkoMalay

71K19 Huy hiệu vàng144 Huy hiệu bạc178 Huy hiệu đồng7 silver badges11 bronze badges

1

Có chức năng

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

7, có thể được gọi khi tập lệnh đã tải thành công:

1

SimhumilecoNov 2, 2017 at 6:03

29.1k16 Huy hiệu vàng130 Huy hiệu bạc108 Huy hiệu đồngvaenow

Đã trả lời ngày 14 tháng 12 năm 2014 lúc 10:411 silver badge9 bronze badges

MSSMSS

2

3,40224 Huy hiệu bạc28 Huy hiệu đồngApr 30, 2020 at 16:00

Một kịch bản nhỏ đẹp mà tôi đã viết để tải nhiều tập lệnh:JohnW

Đã trả lời ngày 19 tháng 6 năm 2016 lúc 9:045 silver badges6 bronze badges

Elishererelisherer

1.5191 Huy hiệu vàng15 Huy hiệu bạc29 Huy hiệu đồng

3

Gần một thập kỷ sau và không ai làm phiền khi viết phiên bản

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

8, vì vậy đây là của tôi (dựa trên Awnser này):Nov 18, 2019 at 5:45

Cách sử dụngJD Savaj

________số 87 silver badges14 bronze badges

Đã trả lời ngày 18 tháng 10 năm 2021 lúc 12:45

NEARHUSCARLNEARHUSCARL

4

Khi các tập lệnh được tải không đồng bộ, chúng không thể gọi document.write. Các cuộc gọi chỉ đơn giản sẽ bị bỏ qua và một cảnh báo sẽ được ghi vào bảng điều khiển.May 11, 2020 at 9:39

Bạn có thể sử dụng mã sau để tải tập lệnh một cách linh hoạt:

5

Cách tiếp cận này chỉ hoạt động tốt khi nguồn của bạn thuộc về một tệp riêng biệt.

Nhưng nếu bạn có mã nguồn như các hàm nội tuyến mà bạn muốn tải động và muốn thêm các thuộc tính khác vào thẻ tập lệnh, ví dụ: lớp, loại, v.v., sau đó đoạn trích sau đây sẽ giúp bạn:

Đã trả lời ngày 26 tháng 12 năm 2019 lúc 12:19May 18, 2018 at 19:21

1

Malaymalay

6

5677 Huy hiệu bạc11 Huy hiệu đồng

Bạn có thể thử sau đoạn mã sau.

7

Đã trả lời ngày 2 tháng 11 năm 2017 lúc 6:03Mar 12, 2021 at 5:05

Vaenowvaenowtrusktr

1541 Huy hiệu bạc9 Huy hiệu đồng50 gold badges183 silver badges253 bronze badges

Mặc dù vậy, một lớp phủ (không có sự khác biệt thiết yếu đối với câu trả lời ở trên):

8

Đã trả lời ngày 30 tháng 4 năm 2020 lúc 16:00

9

JohnwjohnwJun 15, 2017 at 18:29

5245 Huy hiệu bạc6 Huy hiệu ĐồngScott Jungwirth

Đây là công việc cho tôi.2 gold badges34 silver badges34 bronze badges

Bạn có thể kiểm tra nó.

Đã trả lời ngày 18 tháng 11 năm 2019 lúc 5:45 If your scripts are dependent one after other, then position will need to be in sync.

JD Savajjd Savaj

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

0

7917 Huy hiệu bạc14 Huy hiệu đồngJul 23, 2019 at 10:30

Tải các tập lệnh phụ thuộc vào nhau với đúng thứ tự.Satyam Pathak

Dựa trên phản ứng Satyam Pathak, nhưng đã sửa lỗi. Nó đã được kích hoạt trước khi tập lệnh thực sự được tải.3 gold badges23 silver badges51 bronze badges

Đã trả lời ngày 11 tháng 5 năm 2020 lúc 9:39

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

1

Vâng, có nhiều cách bạn có thể bao gồm JavaScript động, tôi sử dụng cách này cho nhiều dự án.

Bạn có thể gọi Tạo một chức năng phổ quát có thể giúp bạn tải càng nhiều tệp JavaScript khi cần. Có một hướng dẫn đầy đủ về điều này ở đây.Oct 27, 2019 at 12:07

Chèn JavaScript động đúng cáchMoshe Simantov

Đã trả lời ngày 18 tháng 5 năm 2018 lúc 19:212 gold badges23 silver badges33 bronze badges

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

2

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

3

Không ai đề cập đến nó, nhưng bạn cũng có thể dán mã nguồn thực tế vào thẻ tập lệnh bằng cách tạo một URL từ đó bằng cách sử dụng

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

9 và

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}

0:Sep 21, 2021 at 6:32

1

Chúng ta có thể sử dụng thẻ script trong javascript không?