Pregunta:

Fecha: 29-02-2016 09:19:28 (En Español)

Cargar Javascript y CSS de manera dinámica[Resuelta]

Hola compañeros como estan? Tengo una duda existencial como podria hacer para cagar de manera dinamica archivos JS y CSS en mi header.

Ejemplo tengo armado mi sitio web en tres partes header, cuerpo y footer.

Header

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <title><?php echo $title; ?></title>
   <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>

Cuerpo

<body>
   <?php echo $cuerpo ?>
</body>

Footer

   <footer>
      <?php echo $footer; ?>
   </footer>
</html>

Yo en todas las paginas que voy a crear voy a nesecitar cargar Jquery, pero excepto en una voy a nesecitar cargar un archivo JS externo y otro CSS externo. Como podria hacer para cargar eso dos archivo externos si tener que modificar mi header.php.

Que recomiendan hacer en estos casos? Por que pienso que no seria eficiente cargar en todas las paginas que cree esos dos archivos y solo usarlo en una.

Estoy con codeigniter.

¡Saludos y desde ya gracias! Etiquetas: CSS - HTML - Javascript - JQuery - JQuery UI - Mejores Prácticas - PHP - Pregunta Votos: 5 - Respuestas: 12 - Vistas: 49 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

5

Juan Quinto Karma: 2761
Fecha: 29-02-2016 10:08:03
Hola gonzalo si lo que quieres es cargar js dinamicos usa el
```
$.getScript('../js/funciones.js');
```
$.getScript(ruta del archivo);

nota : getScript es de jquery
Votos: 5 - Link respuesta
4

Qué Código Karma: 2708
Fecha: 29-02-2016 11:00:55
Hola amigos,
Lo que yo hago en estos casos es hacer un solo archivo llamado includes.php donde pongo todo en funciones.
```
<?
Function head_script(){
?>
<script src="JQuery.js"></script>
<link rel="stylesheet" href="CSS/style.css">
<?
}
?>
```
Y así sucesivamente todo lo que necesites repetir como menú, slider, etc

Ya después incluyó la página en la configuración.
Y lo llamo según la sección que necesitas.
```
<?
echo head_script();
?>
```
Y listo

Saludos
Votos: 4 - Link respuesta
2

Gonzalo Herrera Karma: 618

Fecha: 29-02-2016 11:03:24 Hola Juan, voy a investigar un poco sobre $.getScript, por que lo desconocia y vuelvo a comentar.

Me gusto tu idea capa8, gracias por compartir tu conocimiento.

¡Saludos! Votos: 2 - Link respuesta

Gonzalo Herrera Karma: 618

Fecha: 01-03-2016 07:03:48 Buenas tardes, yo de nuevo por aqui. Lo que hice fue en la vista header

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <title><?php echo $title; ?></title>
   <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<?php if(isset($scriptCalendar)): ?>
   <link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<?php endif; ?>
</head>

Preguntar si esta definida la variable $scriptCalendar, dicha variable se la voy a pasar por el contralador.

No se si sera una buena práctica. Si alguien quiere aportar mas ideas bienvenido sea.

¡Saludos! Votos: 2 - Link respuesta

Anonimo Anonimo Karma: -4

Fecha: 06-03-2016 02:46:57 Hola, con CodeIgniter no se porque no trabajo pero lo que hago es hacer un echo de la línea que quiero incorporar, dependiendo del perfil y opción de menú seleccionado

			
if($_SESSION['sbtnmenu']=='Menu 1'){
	if($_SESSION['sperfil']==4){ 
		echo '<title>Perfil 4</title>';				
	}				
	if($_SESSION['sperfil']==5){ 
		echo '<title>Perfil 5</title>';
	}
	if($_SESSION['sperfil']==2){ 
		echo '<title>Perfil 2</title>';				
	}				
	echo	'<script src="js/menu1.js"></script>';				
}
if($_SESSION['sbtnmenu']=='Menu 2'){
	if($_SESSION['sperfil']==4){
	        echo '<title>Perfil 4</title>';				
	}				
	if($_SESSION['sperfil']==5){
		echo '<title>Perfil 5</title>';
	}
	if($_SESSION['sperfil']==6){
         	echo '<title>Perfil 6</title>';
	}
	echo '<script src="https://maps.googleapis.com/maps/api/js"></script>';
	echo '<script src="js/menu2.js"></script>';	
}

Todo esto lo hago en el index. Expongo esta parte que es tu pregunta pero, además, hago más o menos lo mismo con las opciones de menu, que menú mostrar dependiendo el perfil, etc

Espero que haya sumado a las propuestas o ideas anteriores o a cualquier que lea esta respuesta

Saludos

DIEGO Votos: 0 - Link respuesta

1

Qué Código Karma: 2708

Fecha: 06-03-2016 05:56:16 Hola,
Eso no creo que sea una buena práctica ya que siempre te tocaría iniciar session con cada uno y así llenas el cache del navegador.

Saludos Votos: 1 - Link respuesta
1

Anonimo Anonimo Karma: -4

Fecha: 06-03-2016 06:34:27 No entendí muy bien la respuesta. Cada perfil se loguea diferente, es decir, no es que un mismo cliente (navegador) se va a loguear con diferentes perfiles o entendí cualquier cosa jajaja. Pero me interesa tener buenas prácticas de programación.

Como siempre, buenos aportes los suyos

Saludos

DIEGO Votos: 1 - Link respuesta
1

Gonzalo Herrera Karma: 618

Fecha: 06-03-2016 16:16:34 Hola Diego, muchas gracias por exponer tu código me sirve mucho para mejorar.

¡Saludos! Votos: 1 - Link respuesta

Miguel Panuera Karma: 58

Fecha: 29-11-2016 18:07:23 Para cargar JS dinamicos, uso la siguiente funcion

/* Cargar Scripts Basicos */
function loadScript(url, callback){
	var script = document.createElement("script")
	script.type = "text/javascript";
	if (script.readyState){  //IE
		script.onreadystatechange = function(){
			if (script.readyState == "loaded" ||
				script.readyState == "complete"){
				script.onreadystatechange = null;
				callback();
			}
		};
	} else {  //Others
		script.onload = function(){
			callback();
		};
	}
	script.src = url;
	document.getElementsByTagName("head")[0].appendChild(script);
}

y para llamarla uso

loadScript("jsClass/tinymce/tiny_mce.js", function(){
												document.getElementById('loading-msg').innerHTML = 'Abriendo Aplicacion......';
											});

Votos: 1 - Link respuesta

1

Antonio García Karma: 103

Fecha: 13-03-2017 19:15:46 creo que te has encerado en un loop, la forma de hacerlo es creando lo mismo que hiciste en el <body> y en el <footer> con la diferencia que ahora lo debes hacer en el área de metatag o sea en el <head> creas una función php, en la cual condicionas el retorno de una cadena, donde colocas tags html, embebido, de forma que puedas crear diferentes ambientes y así poder cargar el numero de ficheros js, css, etc que necesites, de echo puedes crear tus propias configuraciones dinámicas llevando esto a las variables metatag, eficientando entonces los vencimientos, cache, valores de búsqueda y un largo etc, espero que pueda ser de ayuda para resolver tu problema, saludos desde Guatemala. Votos: 1 - Link respuesta

Luis Herazo Karma: 14

Fecha: 23-06-2017 10:50:45 yo lo haria de la siguiente manera .- En el header.

$pag = "pagina-que-cargará-los-css-y-js.php";
$url= $_SERVER["REQUEST_URI"];

if ($pag == $url){
      echo "<link rel="stylesheet" type="text/css" href="url-del-css">";
     echo "<script type="text/javascript" src="url-del-js"></script>";

}

Votos: 0 - Link respuesta

0

Carlos Santis Karma: 8
Fecha: 13-04-2018 12:18:58
Hola buenas.-

Si estas en Codeigniter lo puedes realizar de la siguiente manera (obviamente lo debes llamar en el controlador en el cual te encuentres trabajando):

1.-
crea un helper que contenta las siguientes funciones
```
<?php if (!defined('BASEPATH')) {
    exit('No direct script access allowed');
}

function script_view($arg_view)
{
    $arr                  = explode('/', $arg_view);
    $str                  = $arr[count($arr) - 1];
    $str                  = str_replace('_view', '_script_view', $str);
    $arr[count($arr) - 1] = $str;
    return implode('/', $arr);
}

function style_view($arg_view)
{
    $arr                  = explode('/', $arg_view);
    $str                  = $arr[count($arr) - 1];
    $str                  = str_replace('_view', '_style_view', $str);
    $arr[count($arr) - 1] = $str;
    return implode('/', $arr);
}
```
2.- después, en la clase de "MX_Loader", eso es el caso en que trabajes con hmvc, incorporas la siguiente función (esta validara si existe una vista dada por el parametro $view):
```
public function view_exists($view, $vars = array(), $return = false)
    {
        list($path, $_view) = Modules::find($view, $this->_module, 'views/');

        if ($path != false) {
            $this->view($view, $vars, $return);
        }
    }
```
3.- para el css en tu plantilla base debes agregar en el head el script que te cargue la vista de css, suponiendo que tu vista se llama persona_view.php. la vista de css debería llamarse persona_style_view.php (la variable $vista, la debes agregar desde el controlador con el nombre de la vista base , en este caso el nombre seria "persona_view").
```
<?php $this->load->view_exists(style_view(isset($vista) ? $vista : ''));?>
```
esto embeberá el código en tu plantilla base.

4.- para el javascript en tu plantilla base debes agregar al final el script que te cargue la vista de javascript, suponiendo que tu vista se llama persona_view.php. la vista de javascript debería llamarse persona_script_view.php (la variable $vista, la debes agregar desde el controlador con el nombre de la vista base , en este caso el nombre seria "persona_view").
```
<?php $this->load->view_exists(script_view(isset($vista) ? $vista : ''));?>
```
esto embeberá el código en tu plantilla base.

5.- para que te hagas una idea, esto cargara automáticamente vistas de css y javascript estrictamente en relación al nombre de las vistas.

persona_view.php
persona_script_view.php
persona_style_view.php

espero que te sirva. saludos
Votos: 0 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

Cargar Javascript y CSS de manera dinámica[Resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta