google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Dùng DOM để chèn các tệp tin JavaScript ngoài jsB@nk xin giới thiệu với các bạn đọc thêm một giải pháp JavaScript nữa để tải các tệp tin JavaScript vào trang web. Phương pháp này sử dụng DOM (Document Object Model) để thực hiện. Bạn vui lòng vào trang chi tiết để xem đầy đủ mã nguồn JavaScript ví dụ mẫu cũng như các trường hợp khả biến được tác giả đề cập.

Các giải pháp liên quan khác để tải tệp tin JavaScript:
- Cách tải tệp tin JavaScript, CSS linh động hơn
- Tải các tệp JavaScript & CSS nhanh hơn với PHP mod_rewrite
- Cách sử dụng JavaScript từ nguồn ngoài
- Cách tốt nhất để nạp các tệp JavaScript


Nhãn: chèn tệp tin JavaScript, giải pháp JavaScript, tệp tin JavaScript

Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

This page shows you how to use javascript (js) to insert a html that contains js code and have that js code run. If you don't know how to insert a element using js, see: Adding HTML Content with Javascript.

The Problem

There are lots js based widgets today. For example, web share widget, Google search widget, Comment widget, twitter, facebook, amazon ads... etc. They let you easily add functionality to your site.

If your webpage is static html, or generated by php or content manager software, you can directly include these widgets at the right place at the server side. However, sometimes it is convenient to use a js to insert them. Because, you may want the location of the widget to be different for different pages. Or, only centain pages you want to include the widget, but you don't know which until the page is generated.

So, the solution is to use a client side js that insert these js widgets.

If you use a javascript to insert a js code xyz, will the newly inserted xyz script run?

It depends on how you construct the element to be inserted. If the 「<script...>...</script>」 is constructed using 「innerHTML = ...」, then it won't work. But if it is constructed as a DOM element, then it'll work.

Using innerHTML Does Not Work

First, let's see what happens if you don't do anything special.

Suppose you want to use js to insert the following js code.

<div class="xyz">
 <p>Fantastic!</p>
 <script type="text/javascript">alert("woot!");</script>

</div>

Suppose you do it this way:

var myElement = document.createElement("div"); // create new div element

myElement.setAttribute("class", "xyz"); // add a class attribute


// add html in the div element
myElement.innerHTML='<p>Fantastic!<\/p> <script type="text/javascript">alert("woot!");<\/script>';

// add the new element after the first p tag
document.body.insertBefore(myElement, (document.getElementsByTagName("p"))[0]);

It will fail in IE8, Google Chrome, Opera. (but works in Firefox 3.6.12).

You can see what your browser do here: insert_js.html. For a version where each js file is on its own page, see: js_insert_js.html.

Creating 「<script>」 Object by createElement

Here's how to make it work. It's easy. Instead of using 「myElement.innerHTML="<script>...</script>";」, you should create the script element as a DOM object, then you insert this object.

Here's a sample js code:

var ele = document.createElement("script");
ele.type = "text/javascript";
ele.innerHTML='alert("woot!");'

document.body.insertBefore(ele, (document.getElementsByTagName("p"))[0]);

Here's a test page using this code: js_insert_js_works.html.

Twitter Example

Suppose you want to insert this code:

<div class="twtr">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="xah_lee">Tweet</a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

It's a widget that shows a Twitter button with number of tweets of the page.

Here's how you do it in your js:

// insert a twitter div tag before element cg
function insertTwitter (cg) {
    var mdv = document.createElement("div");
    mdv.setAttribute("class", "twt");

    mdv.innerHTML='<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="xah_lee">Tweet</a>';

    var ele = document.createElement("script");
    ele.type = "text/javascript";
    ele.src = "http://platform.twitter.com/widgets.js";

    mdv.appendChild(ele);

    document.body.insertBefore(mdv, cg);

}


// insert before the first p tag
insertTwitter((document.getElementsByTagName("p"))[0]);

Thanks to idealmachine and DVK. stackoverflow.com.

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web