Html hiển thị nội dung từ một trang khác

Một cách mà JavaScript thường được sử dụng là ẩn hoặc hiển thị nội dung dựa trên hành vi của người dùng. Ví dụ: người dùng có thể chọn một tùy chọn khi điền vào biểu mẫu trực tuyến và lựa chọn của họ có thể khiến các trường biểu mẫu liên quan khác xuất hiện. Trong bài học này, bạn sẽ sử dụng CSS và Javascript để hiển thị và ẩn đồng hồ mà bạn đã tạo

Kết quả của người học

Khi hoàn thành bài tập này

• bạn sẽ có thể sử dụng CSS để ẩn và hiển thị nội dung
• bạn sẽ có thể sử dụng JavaScript để thay đổi và các thuộc tính CSS của phần tử HTML

Các hoạt động

Thông lệ phổ biến trên web ngày nay là ẩn nội dung khỏi người dùng cho đến khi cần thiết. Trong bài này các bạn sẽ ẩn đồng hồ đi, sau đó thêm link mà nếu click vào sẽ hiện đồng hồ

mở javascript. html trong cả trình soạn thảo văn bản và trình duyệt web của bạn. Chuyển đến biểu định kiểu mà bạn đã tạo cho div#clock trong bài học trước. Thêm thuộc tính sau vào biểu định kiểu

Bây giờ làm mới trang của bạn trong trình duyệt của bạn. Chuyện gì đã xảy ra thế? . Đây là một trong một số cách để ẩn nội dung bằng CSS. Để hiển thị lại phần tử, bạn sẽ thay đổi thuộc tính này thành

Tuy nhiên, trong trường hợp này, chúng tôi chỉ muốn hiển thị phần tử nếu người dùng yêu cầu cụ thể. Vì vậy, chúng tôi sẽ phải thay đổi kiểu động, sử dụng JavaScript, được kích hoạt bởi sự kiện onclick

Đầu tiên, thêm phần tử mà bạn muốn người dùng nhấp vào

Hiển thị đồng hồ

Lưu ý rằng nút này về cơ bản giống như nút bạn đã tạo trong Bài 1 để hiển thị cảnh báo. Có một sự khác biệt quan trọng mặc dù. Nút này có thuộc tính id. Đó là để bạn có thể truy cập nó dễ dàng bằng JavaScript (bạn sẽ hiểu tại sao trong giây lát)

Bây giờ bạn đã có một nút mà khi được nhấp vào sẽ gọi hàm toggleClock(), bạn cần tạo một hàm toggleClock(). Đây là chức năng đó - chỉ cần thêm nó vào phần tập lệnh hiện có ở đầu trang web của bạn

  function toggleClock() {
    // get the clock
    var myClock = document.getElementById('clock');

    // get the current value of the clock's display property
    var displaySetting = myClock.style.display;

    // also get the clock button, so we can change what it says
    var clockButton = document.getElementById('clockButton');

    // now toggle the clock and the button text, depending on current state
    if (displaySetting == 'block') {
      // clock is visible. hide it
      myClock.style.display = 'none';
      // change button text
      clockButton.innerHTML = 'Show clock';
    }
    else {
      // clock is hidden. show it
      myClock.style.display = 'block';
      // change button text
      clockButton.innerHTML = 'Hide clock';
    }
  }

Trong hàm toggleClock() mới này, bạn đang sử dụng JavaScript để truy xuất phần tử đồng hồ, lấy giá trị hiện tại của kiểu hiển thị của nó, sau đó kiểm tra nó. Nếu màn hình hiện đang được đặt thành "khối", đồng hồ sẽ hiển thị, vì vậy bạn thay đổi màn hình thành "không" để ẩn đồng hồ. Nếu đồng hồ đã bị ẩn, bạn thay đổi hiển thị thành "chặn" để hiển thị lại. Trong khi bạn đang chuyển đổi qua lại màn hình của đồng hồ từ "khối" thành "không", bạn cũng đang thay đổi văn bản (HTML bên trong) trên nút đồng hồ, sao cho luân phiên giữa "Hiển thị đồng hồ" và "Ẩn đồng hồ", tùy thuộc vào

Tất cả đã được làm xong?

Kiểm tra trang web của bạn và đảm bảo rằng bạn có thể hiển thị và ẩn đồng hồ bằng nút mới. Ngoài ra, hãy đảm bảo văn bản của nút thay đổi từ "Hiển thị đồng hồ" thành "Ẩn đồng hồ" khi thích hợp. Chia sẻ trang web của bạn với người hướng dẫn của bạn. Nếu tất cả đều ổn, hãy chuyển sang bài học tiếp theo

Tôi vô cùng ngạc nhiên rằng HTML chưa bao giờ có bất kỳ cách nào để bao gồm các tệp HTML khác trong đó. Dường như không có bất cứ điều gì trên đường chân trời giải quyết nó. Tôi đang nói về việc bao gồm trực tiếp, chẳng hạn như lấy một đoạn HTML và ghép nó vào một đoạn khác. Ví dụ: trường hợp sử dụng cho phần lớn toàn bộ internet, bao gồm đầu trang và chân trang cho tất cả các trang

...

   

   Content

   

...

Nhân tiện, điều đó không có thật. Tôi chỉ ước nó là

Mọi người đã tìm đến các ngôn ngữ khác để giải quyết vấn đề này cho họ mãi mãi. Đó là tiền xử lý HTML, theo một nghĩa nào đó. Rất lâu trước khi chúng tôi tiền xử lý CSS của mình, chúng tôi đã sử dụng các công cụ để thao tác HTML của mình. Và chúng tôi vẫn vậy, bởi vì ý tưởng bao gồm hữu ích trên hầu hết mọi trang web trên thế giới

Sử dụng PHP

Bạn có thể sử dụng PHP để thay thế không?

...

   

   Content

   

...

Điều này sẽ thực hiện bao gồm ở cấp máy chủ, làm cho yêu cầu cho nó xảy ra ở cấp hệ thống tệp trên máy chủ, do đó, nó sẽ nhanh hơn nhiều so với giải pháp phía máy khách

Sử dụng Gulp

Điều gì thậm chí còn nhanh hơn bao gồm phía máy chủ? . Gulp có nhiều bộ xử lý có thể làm điều này. Một là gulp-file-gồm

Điều đó sẽ trông như thế này

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

Và bạn sẽ xử lý nó như thế nào

var fileinclude = require('gulp-file-include'),
  gulp = require('gulp');
 
gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

Có vẻ như plugin cụ thể này có các tính năng ưa thích nơi bạn có thể chuyển các biến vào phần bao gồm, giúp bạn có thể tạo các thành phần điều khiển dữ liệu nhỏ

Sử dụng tiếng càu nhàu

Đây là chức năng của plugin grunt-bake. Bạn sẽ định cấu hình Grunt để xử lý HTML của mình

grunt.initConfig({
    bake: {
        your_target: {
            files: {
                "dist/index.html": "app/index.html",
            }
        }
    }
});

Sau đó, HTML của bạn có thể sử dụng cú pháp đặc biệt này để bao gồm

...

   

   Content

   

...

Sử dụng tay lái

Tay lái có một phần

Bạn đăng ký chúng

Handlebars.registerPartial('myPartial', '{{name}}')

Sau đó sử dụng chúng

________số 8

Ngoài ra còn có các tính năng ưa thích này cho phép đánh giá và truyền dữ liệu. Bạn vẫn sẽ cần một bộ xử lý để chạy nó, có thể là thứ gì đó như gulp-handlebars

Nói về các ngôn ngữ tạo khuôn mẫu sử dụng dấu ngoặc nhọn… Bộ ria mép cũng có chúng

Sử dụng Pug

Pug là một bộ tiền xử lý HTML có cú pháp hoàn toàn mới cho HTML ngắn gọn hơn một chút. Nó có bao gồm mặc dù

...
body
   include ./header.html"

   p Content

   include ./footer.html"

   ...

Sau đó, bạn chạy nó với thứ gì đó như gulp-pug

Sử dụng Nunjucks

Tôi yêu tôi một số Nunjucks. Nunjucks đã bao gồm. Bạn sẽ làm như thế này

...

   

   Content

   

...

0

Nếu bạn đặt nó trong một tệp có tên là

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

1, bạn có thể xử lý nó bằng một tập lệnh Node đơn giản thành chỉ mục. html như thế này

...

   

   Content

   

...

0

Hoặc xử lý nó bằng thứ gì đó như gulp-nunjucks

11ty có sẵn Nunjucks, cùng với nhiều thứ khác được đề cập cho đến nay. Có thể tốt cho bạn nếu bạn đang thực sự xây dựng một trang web nhỏ

Sử dụng Ajax

Nói rằng bạn đã…

...

   

   Content

   

...

1

Bạn có thể tìm nạp nội dung cho đầu trang và chân trang từ các tệp tương ứng và kết xuất nội dung vào

...

   

   Content

   

...

2

Nói về JavaScript… Nếu bạn đang xây dựng trang web của mình bằng bất kỳ loại khung JavaScript nào, thì việc xây dựng thông qua các thành phần là vấn đề chính ở đó và việc phá vỡ các phần bạn muốn đưa vào các tệp khác sẽ không có vấn đề gì. Một số loại 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

2 và 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

3 là lãnh thổ mà bạn sẽ đến trong React land

Sử dụng iframe

bạn có thể làm điều này

...

   

   Content

   

...

3

Nhưng nội dung trong các iframe đó không chia sẻ cùng một DOM, vì vậy sẽ hơi kỳ lạ, chưa kể đến việc tạo kiểu chậm và khó sử dụng (vì iframe không biết độ cao của nội dung của chúng)

Tuy nhiên, Scott Jehl đã ghi lại một ý tưởng tuyệt vời. Bạn có thể yêu cầu khung nội tuyến đưa nội dung của chính nó vào trang mẹ rồi tự xóa

...

   

   Content

   

...

4

Kolya Korruptis đã viết bằng bản điều chỉnh này sẽ bao gồm nhiều hơn phần tử con đầu tiên của nội dung trong trường hợp tệp HTML của bạn có nội dung đó

...

   

   Content

   

...

5

Sử dụng Jekyll

Jekyll là trình tạo trang web tĩnh dựa trên Ruby có bao gồm. Bạn giữ nội dung của mình trong thư mục 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

4, sau đó

...

   

   Content

   

...

6

Jekyll là một công cụ lớn, vì vậy tôi gọi nó ở đây, nhưng có rất nhiều công cụ tạo trang web tĩnh và tôi cá rằng bất kỳ công cụ nào trong số chúng có thể làm được bao gồm

Sử dụng Serge

Được rồi, tôi sẽ gọi thêm một SSG vì nó mới và siêu tập trung. Sergey có định dạng kiểu thành phần web

...

   

   Content

   

...

7

Bạn sẽ đặt tên cho các tệp là

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

5 và 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

6 và đặt chúng vào 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

7 và sau đó nó sẽ tạo một bản dựng với các tệp bao gồm được xử lý khi bạn chạy tập lệnh npm mà bạn đã thực hiện

Sử dụng Apache SSI

Apache, một máy chủ web phổ biến siêu lừa đảo, có thể bao gồm. Bạn làm như thế này

...

   

   Content

   

...

8

Nhưng bạn cần cấu hình Apache phù hợp để cho phép nội dung. Tôi đã cố gắng hết sức để bản demo hoạt động nhưng không gặp nhiều may mắn

Tôi đã thử sử dụng 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

8 trong một thư mục trên máy chủ Apache và mở những nội dung mà tôi cho là phù hợp

...

   

   Content

   

...

9

Tôi chắc chắn rằng có một số cách để làm cho nó hoạt động, và nếu bạn làm như vậy, thật tuyệt khi nó không cần các phụ thuộc khác

Sử dụng CodeKit

Chỉ dành cho máy Mac, nhưng CodeKit có một ngôn ngữ đặc biệt gọi là Kit nó xử lý trong đó 90% điểm của nó là HTML bao gồm. Nó sử dụng các nhận xét HTML đặc biệt

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

0

Sử dụng Dreamweaver

Lol JK. Nhưng đó thực sự là một điều. DWT, em bé

thánh tào lao

Đó là rất nhiều cách, phải không?

Như tôi đã nói ở trên, tôi rất ngạc nhiên khi bản thân HTML không giải quyết vấn đề này một cách trực tiếp. Không phải tôi nghĩ rằng sẽ là một ý tưởng tuyệt vời cho hiệu suất khi có 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

9 câu lệnh kích hoạt các yêu cầu mạng trên tất cả mã của chúng tôi, nhưng có vẻ như điều đó phù hợp với nền tảng. Sử dụng ES6 nhập trực tiếp mà không cần đóng gói cũng không phải là một ý tưởng tuyệt vời, nhưng chúng tôi có chúng.

var fileinclude = require('gulp-file-include'),
  gulp = require('gulp');
 
gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

0 CSS trong CSS không phải lúc nào cũng là một ý tưởng tuyệt vời, nhưng chúng tôi có nó. Nếu nền tảng có cú pháp gốc, có lẽ công cụ khác sẽ loại bỏ điều đó, giống như các gói JavaScript hỗ trợ định dạng nhập ES6

Làm cách nào bạn có thể liên kết một trang HTML với một trang khác?

Làm cách nào tôi có thể lấy dữ liệu từ một trang web khác bằng HTML?