Cách ẩn id trong url bằng javascript
Chuyển đổi giữa ẩn và hiển thị một phần tử bằng JavaScript Show
Chuyển đổi Ẩn và Hiển thị Chuyển đổi (Ẩn/Hiện) một Phần tửBước 1) Thêm HTMLThí dụNhấp vào đây
Bước 2) Thêm JavaScriptThí dụhàm myFunction() { Trong bài viết này, chúng tôi muốn nói về cách ẩn các phần tử HTML riêng lẻ dựa trên văn bản trong URL. Điều này hữu ích nếu bạn muốn vô hiệu hóa có chọn lọc các thành phần trên trang web của mình bằng cách sử dụng tham số URL như vậy https. //thí dụ. com/?dontshowheader Chúng ta sẽ thực hiện điều này trong vanilla JavaScript hoàn chỉnh, nghĩa là nó sẽ hoạt động với hầu hết mọi thứ. Hỗ trợ trình duyệt là 100% cho mọi thứ chạy JavaScript vì điều này. Khi bạn có đoạn mã này trong bộ nhớ của mình, nó có thể khá hữu ích cho việc nhúng iframe và hơn thế nữa Đối với chúng tôi, chúng tôi sử dụng điều này để ẩn đầu trang và chân trang khi thêm nội dung vào trang qua iframe
Để điều này hoạt động trên trang web của bạn, tất cả những gì bạn cần làm là thay thế 2 thứ trong đoạn mã này và sau đó cài đặt nó bên dưới phần tử mà bạn muốn ẩn Điều đầu tiên là văn bản chứa trong URL. Nếu URL chứa văn bản trong đoạn mã đó thì phần tử mà nó đề cập đến sẽ bị ẩn. Nếu URL không chứa văn bản thì sẽ không có gì xảy ra Trong ví dụ này, chúng tôi có “URLSTRING” (vì vậy nếu một url trông như thế này, https. //thí dụ. com/?urlstring và phần tử sẽ bị ẩn) Điều tiếp theo là phần tử bạn muốn ẩn. Cái này được chọn bởi ID phần tử. Chỉ cần thay thế “ELEMENTTOHIDE” bằng ID của phần tử mà bạn cần ẩn Chúng tôi sử dụng tham số URL để hiển thị và ẩn có chọn lọc dựa trên văn bản trong URL vì tham số này không tạo ra sự khác biệt nào đối với tổng thể trang, không đưa bạn đến một thư mục con khác và hoạt động hiệu quả 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ọcKhi hoàn thành bài tập này
Các hoạt độngThô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 Làm cách nào để ẩn tham số trong url trong JavaScript?Bạn không thể ẩn tham số . Ngay cả khi bạn sử dụng phương thức post thay vì phương thức get để xóa tham số khỏi url. Bạn vẫn có thể thấy các tham số đã truyền trong thông báo yêu cầu. Cách ẩn thông số an toàn là mã hóa chúng.
Làm cách nào để ẩn id div khỏi url trong html?2 câu trả lời . Liên kết đến chính tài liệu thay vì phần tử cụ thể Ở trên cộng thêm JavaScript để mọi khách truy cập vào trang sẽ được cuộn đến div đó Di chuyển div lên đầu trang Sống với nó. Nó không thể bị rò rỉ bất kỳ thông tin bí mật nào Làm cách nào để ẩn dữ liệu biểu mẫu trong url trình duyệt?Phương thức POST được sử dụng để ẩn thông tin xác thực . Nó lấy dữ liệu từ các trường của biểu mẫu HTML và gửi nó qua tiêu đề HTTP mà không được hiển thị trong URL.
Làm cách nào để ẩn tên người dùng và mật khẩu trong url?Cách ẩn chi tiết xác thực trong URL . BƯỚC 1. Tạo một biến chứa baseURL của ứng dụng. . BƯỚC 2. Tạo một biến chứa chi tiết tên người dùng và mật khẩu. . BƯỚC 3. Viết hàm JavaScript nhận giá trị tham số có trong URL |