Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Una página de recursos web (HTML) solo puede aceptar un único parámetro de consulta denominado data. Para pasar más de un valor en el parámetro de datos, necesita codificar los parámetros y descodificar los parámetros de la página.
El ejemplo de recursos web HTML muestra una técnica para pasar los valores adicionales dentro de un único parámetro y, a continuación, procesarlos dentro del recurso web.
Nota
Solo se admiten caracteres alfanuméricos como parámetros de los recursos web. Todos los caracteres incluidos en la cadena de consulta pasan por validación para garantizar la validez de los parámetros pasados. Si el proceso de validación encuentra parámetros no válidos, se produce un error en la solicitud. Por ejemplo, pasar valores de texto entre corchetes angulares se considera un tipo de parámetro no válido.
Ejemplo de recursos web HTML
El código HTML siguiente representa un recurso web de página web (HTML) que incluye un script que define cuatro funciones:
displayDataParameters: se llama cuando el DOM está listo, esta función usa la API URLSearchParams para extraer y analizar el
dataparámetro de la cadena de consulta y, a continuación, muestra los resultados.showMessage: crea y muestra mensajes informativos al usuario, como mensajes de error o actualizaciones de estado.
createParametersTable: recibe parámetros analizados y genera una tabla HTML mediante literales de plantilla y métodos de matriz modernos para mostrar los pares nombre-valor del parámetro.
escapeHtml: una función auxiliar de seguridad que impide ataques XSS al escapar de forma segura el contenido HTML en los valores de parámetro antes de representarlos en la tabla.
Nota
Todos los caracteres incluidos en la cadena de consulta se codifican mediante la función encodeURIComponent. Esta función usa el JavaScript decodeURIComponent function para descodificar los valores transmitidos.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Data Parameters Page</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
background-color: #d6e8ff;
margin: 20px;
}
table {
width: 100%;
max-width: 600px;
border-collapse: collapse;
margin-top: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #333;
color: white;
font-weight: 600;
}
tbody tr {
background-color: white;
}
tbody tr:hover {
background-color: #f5f5f5;
}
.message {
font-size: 16px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<script>
// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', () => {
displayDataParameters();
});
function displayDataParameters() {
// Use URLSearchParams API for modern query string parsing
const urlParams = new URLSearchParams(window.location.search);
const dataParam = urlParams.get('data');
if (!dataParam) {
showMessage("No data parameter was passed to this page");
return;
}
try {
// Parse the data parameter
const decodedData = decodeURIComponent(dataParam);
const params = new URLSearchParams(decodedData);
if (params.size === 0) {
showMessage("No data parameter was passed to this page");
return;
}
showMessage("These are the data parameter values that were passed to this page:");
createParametersTable(params);
} catch (error) {
showMessage("Error parsing data parameter: " + error.message);
}
}
function showMessage(text) {
const message = document.createElement('p');
message.className = 'message';
message.textContent = text;
document.body.appendChild(message);
}
function createParametersTable(params) {
// Create table using template literals for cleaner HTML generation
const tableHTML = `
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
</tr>
</thead>
<tbody>
${Array.from(params.entries())
.map(([key, value]) => `
<tr>
<td>${escapeHtml(key)}</td>
<td>${escapeHtml(value)}</td>
</tr>
`).join('')}
</tbody>
</table>
`;
document.body.insertAdjacentHTML('beforeend', tableHTML);
}
// Helper function to prevent XSS by escaping HTML
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
</script>
</body>
</html>
Uso de esta página
Cree un recurso web denominado
new_/ShowDataParams.htmutilizando el código de muestra.Los parámetros que desea pasar son:
first=First Value&second=Second Value&third=Third ValueNota
Si agrega parámetros estáticos mediante el cuadro de diálogo Propiedades de recursos web del editor de formularios, simplemente puede pegar los parámetros sin codificarlos en la columna Parámetros personalizados (datos). El portal codifica estos valores por usted, pero todavía necesita descodificarlos y extraer los valores de la página.
Para valores dinámicos generados en el código, use el método de
encodeURIComponenten los parámetros. Los valores codificados son:first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20ValueAbra la página pasando los parámetros codificados como valor del parámetro de datos.
https://<server name>/WebResources/new_/ShowDataParams.htm?data=first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20ValueNota
Si agrega el recurso web a un formulario y pega los parámetros sin codificar en la columna Parámetros personalizados (datos), puede obtener una vista previa del formulario.
new_/ShowDataParams.htmmuestra una tabla generada dinámicamente:Parámetro Valor Primero Primer valor Segundo Segundo valor Tercero Tercer valor
Cómo funciona
Para acceder a los valores incrustados en el valor del parámetro de cadena de consulta de datos, en su recurso web en la página web, extraiga el valor del parámetro data. A continuación, use código para analizar la cadena para que pueda acceder a cada par nombre-valor individualmente.
Cuando el DOM está listo, se llama a la displayDataParameters función mediante el agente de escucha de DOMContentLoaded eventos. Esta función usa la API URLSearchParams para extraer el data parámetro de la cadena de consulta. Si la función encuentra un parámetro de datos, descodifica el valor mediante decodeURIComponent y lo analiza como parámetros con codificación URL. Si no se encuentra ningún parámetro de datos, la showMessage función muestra un mensaje informativo.
La createParametersTable función genera una tabla HTML mediante literales de plantilla y métodos de matriz modernos para mostrar los pares nombre-valor del parámetro. La función auxiliar escapeHtml previene ataques XSS al escapar de forma segura el contenido HTML de los valores de los parámetros antes de mostrarlos en la tabla.