javascript - por - script html ejemplos

¿Cómo pasar parámetros a una etiqueta de Script?

Question

Leí el tutorial: para XSS Widgets por Dr. Nic.

Estoy buscando una forma de pasar parámetros a la etiqueta de script. Por ejemplo, para hacer el siguiente trabajo:

<script src="http://path/to/widget.js?param_a=1&param_b=3">

¿Hay alguna forma de hacer esto?

ACTUALIZACIÓN: Dos enlaces interesantes:

• Cómo incrustar el widget Javascript que depende de jQuery en un entorno desconocido (discusión de Stackoverflow)
• Un artículo sobre pasar parámetros a una etiqueta de secuencia de comandos

Answer 1

JQuery tiene una forma de pasar parámetros de HTML a javascript:

Pon esto en el archivo myhtml.html :

<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>

En el mismo directorio crea un archivo subscript.js y ponlo aquí:

//Use jquery to look up the tag with the id of ''myscript'' above.  Get 
//the attribute called video_filename, stuff it into variable filename.
var filename = $(''#myscript'').attr("video_filename");

//print filename out to screen.
document.write(filename);

Analizar Resultado:

Al cargar la página myhtml.html, se imprime ''foobar.mp4'' en la pantalla. La variable llamada video_filename se pasó de html a javascript. Javascript lo imprimió en la pantalla, y apareció como incrustado en el html en el padre.

jsfiddle prueba de que lo anterior funciona:

http://jsfiddle.net/xqr77dLt/

Answer 2

Coloque los valores que necesita en algún lugar donde la otra secuencia de comandos pueda recuperarlos, como una entrada oculta, y luego extraiga esos valores de su contenedor cuando inicialice la nueva secuencia de comandos. Incluso podría poner todos sus parámetros como una cadena JSON en un campo oculto.

Answer 3

Es mejor utilizar la función en los atributos de datos html5 5

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

Dentro del archivo de script http://path.to/widget.js puedes obtener los parámetros de esa manera:

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName(''script'');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute(''data-width''),
             height : scriptName.getAttribute(''data-height'')
         };
 }
</script>

Answer 4

Gracias a jQuery, una solución simple compatible con HTML5 es crear una etiqueta HTML adicional, como div, para almacenar los datos.

HTML :

<div id=''dataDiv'' data-arg1=''content1'' data-arg2=''content2''>
  <button id=''clickButton''>Click me</button>
</div>

JavaScript :

$(document).ready(function() {
    var fetchData = $("#dataDiv").data(''arg1'') + 
                    $("#dataDiv").data(''arg2'') ;

    $(''#clickButton'').click(function() {
      console.log(fetchData);
    })
});

Demostración en vivo con el código anterior: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

En la demostración en vivo, se pueden ver los datos de atributos HTML5 data * que se concatenarán y se imprimirán en el registro.

Fuente: https://api.jquery.com/data/

Answer 5

Lo tengo. Tipo de truco, pero funciona bastante bien:

var params = document.body.getElementsByTagName(''script'');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];

Paso los params en la etiqueta del script como clases:

<script src="http://path.to/widget.js" class="2 5 4"></script>

Este artículo ayudó mucho.

Answer 6

Me disculpo por responder a una vieja pregunta, pero después de pasar una hora luchando con las soluciones anteriores opté por cosas más simples.

<script src=".." one="1" two="2"></script>

Dentro de la secuencia de comandos anterior:

document.currentScript.getAttribute(''one''); //1
document.currentScript.getAttribute(''two''); //2

Mucho más fácil que jquery O análisis de url.

Es posible que necesite el polyfil para doucment.currentScript de la respuesta de @Yared Rodriguez para IE:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName(''script'');
  return scripts[scripts.length - 1];
})();

Answer 7

Otra forma es usar etiquetas meta. Cualquiera que sea la información que se debe pasar a su JavaScript se puede asignar de esta manera:

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

Los datos se pueden extraer de las etiquetas meta como esta (mejor hecho en un controlador de eventos DOMContentLoaded):

var data1 = document.getElementsByName(''yourdata'')[0].content;
var data2 = document.getElementsByName(''moredata'')[0].content;

Absolutamente no hay problemas con jQuery o los gustos, no se necesitan hacks ni soluciones alternativas, y funciona con cualquier versión HTML que admita etiquetas meta ...

Answer 8

Si está utilizando jquery, es posible que desee considerar su método de datos.

He utilizado algo similar a lo que estás intentando en tu respuesta, pero así:

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

También podría crear una función que le permita tomar los parámetros GET directamente (esto es lo que uso frecuentemente):

function $_GET(q,s) {
    s = s || window.location.search;
    var re = new RegExp(''&''+q+''=([^&]*)'',''i'');
    return (s=s.replace(/^/?/,''&'').match(re)) ? s=s[1] : s='''';
}

// Grab the GET param
var param_a = $_GET(''param_a'');

Answer 9

es un hilo muy viejo, lo sé, pero esto también podría ayudar si alguien llega aquí una vez que buscan una solución.

Básicamente, utilicé document.currentScript para obtener el elemento desde donde se está ejecutando mi código y lo filtro utilizando el nombre de la variable que estoy buscando. Lo hice ampliando currentScript con un método llamado "get", por lo que podremos obtener el valor dentro de ese script usando:

document.currentScript.get(''get_variable_name'');

De esta forma, podemos usar el URI estándar para recuperar las variables sin agregar atributos especiales.

Este es el código final

document.currentScript.get = function(variable) {
    if(variable=(new RegExp(''[?&]''+encodeURIComponent(variable)+''=([^&]*)'')).exec(this.src))
    return decodeURIComponent(variable[1]);
};

Me estaba olvidando de IE :) No podría ser tan fácil ... Bueno, no mencioné ese document.currentScript es una propiedad HTML5. No se ha incluido para diferentes versiones de IE (lo probé hasta IE11, y aún no estaba allí). Para compatibilidad con IE, agregué esta porción al código:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName(''script'');
  return scripts[scripts.length - 1];
})();

Lo que estamos haciendo aquí es definir algún código alternativo para IE, que devuelve el objeto de script actual, que se requiere en la solución para extraer parámetros de la propiedad src. Esta no es la solución perfecta para IE ya que hay algunas limitaciones; Si el script se carga de forma asincrónica. Los navegadores más nuevos deben incluir la propiedad ".currentScript".

Espero que ayude.