Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Void :

Adicionando arquivos dinamicamente (css e js) com js

Por , em Javascript

Recommended Posts

Void :    0

Void :
Postado

Olá!

 

Esta dúvida é relacionada ao último tópico que eu criei neste sub-forum de js. o tópico é :

http://forum.imasters.com.br/index.php?sho...=204772&hl=

 

Eu acabei implementando o ajax para navegação do sistema que estou fazendo.

 

Mesmo sabendo que alguns conservadores depreciam a idéia. :D

 

Acabei fazendo, pois meu chefe solicitou que a navegação entre as seções fossem com ajax, sem refresh na página toda .... (chefe pediu, funcionario fez) <_<

 

Bom, mas surgiu uma dúvida agora.

 

A estrutura das páginas que eu dou um request com ajax, só possuem o conteúdo que estiver entre a tag body.

 

Ou seja, basicamente a estrutura, o esqueleto das páginas esta assim:

 

pagina principal.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>Titulo</title> <body> bla bla bla ....
e o conteudo de outras páginas esta mais só assim:

<div id="primeiraDIV">  <conteudo da pagina></div>
Ai que vem o problema, como eu faço, para adicionar arquivos .css e arquivos .js dentro destas páginas que eu dou um request!

 

Bom, como a maioria dos programadores, quando surge um problema, eu tento resolve-lo :D

 

Minha solução foi a seguinte:

 

Colocar entre comentários html (<!-- comment -->) os arquivos que serão inclusos !

 

Idéia genial nao foi !?

 

Foi nada ....

 

Olha só oque eu acabei fazendo:

 

request.html

<!-- 'files to be loaded<files> css = '/helpdesk/_files/css/list.css'; js = '/helpdesk/_files/js/list.js'; </files>-->
main.js

var pregER = /\<files\>.+css.*=.+\'(.*)\'.+?js.*=.+\'(.*)\'.+?\<\/files\>/;if ( files = request.match(pregER) ) {		if ( files[1] )			req.loadFile( files[1] );		if ( files[2] )		   req.loadFile( files[2] );	}
loadFile.js

var type;	if ( type = path.match(/\.(css)/) )	{		if ( document.createStyleSheet )			document.createStyleSheet(path);		else		{			var head	= document.getElementsByTagName("head")[0];			var iUrl 	= '@import url(' + path + ');';			var css	= document.createElement('link');			css.rel	= 'stylesheet';			css.href	= 'data:text/css,' + escape(iUrl);			if ( head.appendChild(css) )				return;		}				}	else if( type = path.match(/\.(js)/) )	{		var head		= document.getElementsByTagName('head')[0];		var script 		= document.createElement('script');		script.type 	= 'text/javascript';		script.src 		= path;			if ( head.appendChild(script) )				return;	}	else	{		return;	}
Problema :

Só é possivel incluir um arquivo.css e um arquivo.js;

 

Bom, essa foi a minha solução, gostaria de saber, da galera mais expert no assunto, oque seria mais aconselhavel neste caso.

 

Resumidamente, o problema é: qual a melhor forma de adicionar arquivos.css e arquivos.js com uma navegação por ajax !

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Void :    0

Void :
Postado

cara ... sera que essa seria a solução mais pro !???pq é parecida com a minha solução inicial neah ... ps.: pouts, postei no lugar errado ... eehuehue, foi mal !

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Acho que se você usar a busca do fórum, achará muita coisa a respeito.

Eu e alguns outros users da época conseguimos fazer uma função pra ajax que carrega javascripts embutidos. Você pode alterá-la facilmente para carregar CSS também. Se bem que eu acho que o melhor para o css e o javascript é ficarem em arquivos externos e serem referenciados no head da página e não em cada página.

 

O código:

function extraiScript(texto){//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum//http://forum.imasters.com.br/index.php?showtopic=165277&	// inicializa o inicio ><	var ini = 0;	// loop enquanto achar um script	while (ini!=-1){		// procura uma tag de script		ini = texto.indexOf('<script', ini);		// se encontrar		if (ini >=0){			// define o inicio para depois do fechamento dessa tag			ini = texto.indexOf('>', ini) + 1;			// procura o final do script			var fim = texto.indexOf('</script>', ini);			// extrai apenas o script			codigo = texto.substring(ini,fim);			// executa o script			//eval(codigo);			/**********************			* Alterado por Micox - http://elmicox.blogspot.com			* Alterei pois com o eval não executava funções.			***********************/			novo = document.createElement("script")			novo.text = codigo;			document.body.appendChild(novo);		}	}}
coloque ela após receber o response do ajax:

var texto=ajax1.responseText;

extraiScript(texto);

Compartilhar este post

Link para o post
Compartilhar em outros sites

F43!4NØ    0

F43!4NØ
Postado

hello...

 

to usando essa funcao:

 

var loadedobjects = "";function IncludeJsCss(){	if (!document.getElementById)		return	for (i=0; i<arguments.length; i++) {		var file=arguments[i]		var fileref=""		if (loadedobjects.indexOf(file)==-1) { //Check to see if this object has not already been added to page before proceeding			if (file.indexOf(".js")!=-1) { //If object is a js file				fileref=document.createElement('script')				fileref.setAttribute("type","text/javascript");				fileref.setAttribute("src", file);			}			else if (file.indexOf(".css")!=-1) { //If object is a css file				fileref=document.createElement("link")				fileref.setAttribute("rel", "stylesheet");				fileref.setAttribute("type", "text/css");				fileref.setAttribute("media", "screen, projection");				fileref.setAttribute("href", file);			}		}		if (fileref!="") {			document.getElementsByTagName("head").item(0).appendChild(fileref)			loadedobjects+=file+" " //Remember this object as being already added to page		}	}}

eu incluo paginas em divs com ajax. essas paginas sao só miolo tbm... ai no final delas chamo assim:

 

<script type="text/javascript">  IncludeJsCss('modules/sysAdm/user/view/css.css');  IncludeJsCss('modules/sysAdm/user/control/engine.js');</script>

mas hoje meu problema eh que vai incluindo varios anexos na index... gostaria de a cada pagina eu limpar os anexados anteriormente pra nao ficar cheio... alguem ajuda?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Void :    0

Void :
Postado

mas hoje meu problema eh que vai incluindo varios anexos na index... gostaria de a cada pagina eu limpar os anexados anteriormente pra nao ficar cheio... alguem ajuda?

ai que esta o X da questão cara !vai incluindo, inclusive o mesmo arquivo, várias vezes !!!seria legar ir limpando mesmo, sei la, armazenar em um array !vou tentar fazer alguma coisa amanha !!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

F43!4NØ    0

F43!4NØ
Postado

ai que esta o X da questão cara !vai incluindo, inclusive o mesmo arquivo, várias vezes !!!seria legar ir limpando mesmo, sei la, armazenar em um array !vou tentar fazer alguma coisa amanha !!!

nessa funcaozinha que postei eh feita uma verificacao se o objeto ja nao foi anexado... e só anexa 1x.eu to pensando seriamente em usar iframes como divs... sei la.. acho que fica mais organizado, mais modular.. pois as paginas que serao inseridas no iframe pode ter todo o cabecalho e os respectivos js/css 'enxergados' localmente... e pensando bem parece mais semantico... nao sei pq iframe eh deprecated. e acho que vo muda todo os meus esquemas de navegacao com links normais... foi bom chegar onde cheguei pq aprendi legal o js... mas eh chatinho... e qdo se precisa produzir algo expresso... ja viu! e tbm pela questao de ter muito js pra carregar... me preocupo muito com desempenho... muito chato esperar a pagina carregar os js... bom... foi um desabafo só.abraco!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Void :    0

Void :
Postado

então cara ... eu não gosto muito da idéia de utilizar iframes não ... acho que eu tenho um bloqueio mental para iframes :D!!!entre iframes, e navegação com ajax, sou mais a naveção com ajax .. !!!em partes, eu concordo com o seu desabafo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Void :    0

Void :
Postado

então, surgiu outro problema ...

as páginas que eu chamo com o ajax, nao implementam a função de navegação por ajax !!

 

Entenderão !?

 

a função só tem efeito na página incial, nas páginas "internas" quando eu clico em algum link ele executa a url, como se estivesse navegando em um site normal !

 

eu até sei como resolver isso, basta executar esse script

 

var allLinks = doc.getElementsByTagName("a");	if( allLinks.length > 0 ) {					for (var i =0; i < allLinks.length; i++)			this.listener(allLinks[i],"click",this.link);

Assim que uma página for carregada ... mas eu queria saber, se nao tem como criar uma função que seja executada tanto na página inicial, como em todos as páginas que eu for carregar, maja !? Como se fosse um listener mesmo !

Compartilhar este post

Link para o post
Compartilhar em outros sites

F43!4NØ    0

F43!4NØ
Postado

então, surgiu outro problema ...as páginas que eu chamo com o ajax, nao implementam a função de navegação por ajax !!... mas eu queria saber, se nao tem como criar uma função que seja executada tanto na página inicial, como em todos as páginas que eu for carregar, maja !? Como se fosse um listener mesmo !

olha... acho que só incluindo o script direto no corpo do documento. tbm nao tive sucesso com isso ainda! a gente vai por esse caminho e de repente nao acha a saida... só paredoes enormes...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Void :    0

Void :
Postado

então, surgiu outro problema ...as páginas que eu chamo com o ajax, nao implementam a função de navegação por ajax !!... mas eu queria saber, se nao tem como criar uma função que seja executada tanto na página inicial, como em todos as páginas que eu for carregar, maja !? Como se fosse um listener mesmo !

olha... acho que só incluindo o script direto no corpo do documento. tbm nao tive sucesso com isso ainda! a gente vai por esse caminho e de repente nao acha a saida... só paredoes enormes...
verdade cara ... concordo !!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito