Cách an toàn nhất là truyền dữ liệu cần thiết cho HTML trực tiếp. Nếu bạn sử dụng các thuộc tính hoặc dịch vụ bộ đệm, nó có thể trở nên phức tạp hoặc thất bại dưới nhiều người dùng đồng thời. Có nhiều kỹ thuật để chuyển một đối tượng ban đầu từ máy chủ (.G) cho máy khách (.html).
There are many techniques to pass an initial object from the server (.gs) to the client (.html).
Sử dụng HTMLTEMPLATE, bạn có thể làm: //.gs tệp
//.gs file
và trong tệp mẫu của bạn-client.html:
<!DOCTYPE html> <script> var data = <?!= JSON.stringify(dataFromServerTemplate) ?>; //Stores the data directly in the javascript code // sample usage function initialize() { document.getElementById("myTitle").innerText = data.first + " - " + data.last; //or use jquery: $("#myTitle").text(data.first + " - " + data.last); } // use onload or use jquery to call your initialization after the document loads window.onload = initialize; </script> <html> <body> <H2 id="myTitle"></H2> </body> </html>Cũng có thể làm điều đó mà không cần sử dụng khuôn mẫu, bằng cách nối thêm một div ẩn vào htmloutput:
//.gs tệp:
function appendDataToHtmlOutput(data, htmlOutput, idData) { if (!idData) idData = "mydata_htmlservice"; // data is encoded after stringifying to guarantee a safe string that will never conflict with the html. // downside: increases the storage size by about 30%. If that is a concern (when passing huge objects) you may use base94 // or even base128 encoding but that requires more code and can have issues, see //stackoverflow.com/questions/6008047/why-dont-people-use-base128 var strAppend = "<div id='" + idData + "' style='display:none;'>" + Utilities.base64Encode(JSON.stringify(data)) + "</div>"; return htmlOutput.append(strAppend); } // sample usage: function doGet() { var htmlOutput = HtmlService.createHtmlOutputFromFile('html-sample') .setSandboxMode(HtmlService.SandboxMode.IFRAME) .setTitle('sample'); // data can be any (serializable) javascript object. // if your data is a native value (like a single number) pass an object like {num:myNumber} var data = { first: "hello", last: "world" }; // appendDataToHtmlOutput modifies the html and returns the same htmlOutput object return appendDataToHtmlOutput(data, htmlOutput); }và trong đầu ra của bạn-client.html:
<!DOCTYPE html> <script> /** * getDataFromHtml * * Inputs * idData: optional. id for the data element. defaults to "mydata_htmlservice" * * Returns * The stored data object */ function getDataFromHtml(idData) { if (!idData) idData = "mydata_htmlservice"; var dataEncoded = document.getElementById(idData).innerHTML; var data = JSON.parse(atob(dataEncoded)); return data; } // sample usage of getDataFromHtml function initialize() { var data = getDataFromHtml(); document.getElementById("myTitle").innerText = data.first + " - " + data.last; //or use jquery: $("#myTitle").text(data.first + " - " + data.last); } // use onload or use jquery to call your initialization after the document loads window.onload = initialize; </script> <html> <body> <H2 id="myTitle"></H2> </body> </html>
Cả hai phương pháp đều được so sánh và được giải thích tốt hơn trong GitHub nhỏ này tôi đã thực hiện: //github.com/zmandel/htmlservice-get-set-data
Sử dụng một số kỹ thuật, bạn có thể truyền một giá trị (được gọi là tham số) từ trang này sang trang khác để phổ biến các trường biểu mẫu hoặc hiển thị trên trang HTML.
Gửi trang
Các giá trị có thể được gửi từ trang (gửi) ban đầu bằng cách tạo một liên kết đến trang đích bao gồm các tham số liên kết các biến sẽ được truyền. Chúng sau đó được phân tích cú pháp bởi trang nhận trở lại vào các giá trị.
Syntax:
/urltopage?var1=@variable1@&var2=@variable2@
Where:
- URLTOPAGE là URL tương đối đến trang đích.
- Biến1, biến2, v.v. là các tên biến (ví dụ: @firstName @).
- var1, var1 tên tương ứng cho các biến
Examples:
Cổng thông tin
- Tạo một phím tắt cổng thông tin và liên kết liên kết với phím tắt đó.
Cái nút
- Tạo chỉ đọc - Trường tùy chỉnh biến hệ thống với:
Siêu liên kết
- Tạo chỉ đọc - Trường tùy chỉnh biến hệ thống với:
Siêu liên kết: User and Company variables can be used to pass the current logged in user details and their company details.
Lưu ý: Các biến người dùng và công ty có thể được sử dụng để truyền thông tin chi tiết người dùng hiện tại và chi tiết công ty của họ.
Nhận trang
Trên trang nhận, các tham số có thể phổ biến trước một biểu mẫu hoặc phần tử HTML nằm trên trang đó. Để đạt được điều này, các chức năng JavaScript sau đây có thể được sử dụng.
function getParams() { var idx = document.URL.indexOf('?'); var params = new Array(); if (idx != -1) { var pairs = document.URL.substring(idx+1, document.URL.length).split('&'); for (var i=0; i<pairs.length; i++) { nameVal = pairs[i].split('='); params[nameVal[0]] = nameVal[1]; } } return params; } params = getParams();
Đặt hàm đầu tiên sau vào đầu HTML.
Đặt một trong các chức năng thứ hai sau đây trong cơ thể ngay trước khi đóng thẻ cơ thể ().
Dân số thực địa
Dân số nguyên tố HTML (ví dụ:)
Thay thế "Field1" hoặc "Element1", v.v. bằng tên ID hoặc phần tử thực tế và "var1" bằng tên tham số.
ví dụ.
var para1 = document.getEuityById ('FirstName');
hoặc
ví dụ.
var para1 = document.getEuityById ('FirstName');
hoặc
hoặc
- SmartSimple sẽ thay thế các tham chiếu biến (@lastname@, v.v.) bằng các giá trị xuất phát từ phiên người dùng hiện tại.