Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

30-12-2009 13:05

Boa tarde, estou fazendo um editor html e cheguei no pondo de visualizar o código fonte.
Até ai tudo bem, mesmo pesquisando por ai não falam nada de abrir o codigo html pelo iframe, o unico código que achei foi algo como window.location = "view-code"+location; que funciona bem no firefox mas no internet explore nada!!!,

então desenvolvi um codigo utilizando o innerHTML para substituir o iframe pelo textarea, colocando assim o conteudo com as tags no textarea, até ai tudo bem, "em partes" pois consegui exibir no textarea tudo que está dentro do body e eu queria o html inteiro do iframe "<html><head>..."

só que além disso queria clicar no mesmo botão e retornar o iframe novamente "alterado ou não pelo codigo do textarea", por isso criei uma instrução if que "deveria" funcionar da seguinte forma, ao clicar no botão se o comparativo for 1 então comparativo = 2 e substituir iframe para textarea com o conteudo do iframe, else compartativo = 2 e substituir textarea por iframe com o conteudo do textarea. Só que a instrução else não está funcionando, de uma olhada no codigo e me ajude por favor!!!

codigo javascript:

var comparativo = 1; function html(){ if (comparativo == 1){ comparativo = 2; conteudo = document.getElementsByTagName('iframe')[0]; document.getElementById('teste').innerHTML = "<TEXTAREA cols='60' rows='20' ID='editor_html'>" + conteudo.contentwindow.document.body.innerHTML; + "</TEXTAREA>"; }else{ comparativo = 1; cont_iframe = window.frames['editor'].document.getElementById('editor_html'); cont_iframe.document.getElementById('teste').innerHTML = "<iframe id='editor' onload='Iniciar()' frameborder='0' src='./ferramentas/editor.html' style=' border:1px solid; width: 510px; height: 350px'></iframe>"; } }

codigo html:

<input type="button" id="html" onclick="html()" value="html"/><?echo " "; ?> </br> <center> <div id="teste" style="color:#00FF00"> <iframe id="editor" onload="Iniciar()" frameborder="0" src="./ferramentas/editor.html" style=" border:1px solid; width: 510px; height: 350px"></iframe> </div> </center>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

30-12-2009 16:26

Então o problema é que você só consegue obter do iframe a parte dentro do body?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

30-12-2009 17:22

Isso também!!! mas o que me deixa mais grilado é o fato de não ter uma bentita alma que me mostre como inserir conteudo dinamicamente dentro do iframe.

se voce executou o codigo notará que o innerHTML modifica corretamente o iframe com o conteudo para o textarea dessa forma consegui ver o codigo fonte,
mas gostaria de clicar no botão (o mesmo que substituiu o iframe pelo textarea) para me mostrar o iframe novamente (alterado, ou não pelo textarea), compreende?

Ou seja o camarada digita algo no iframe clica no botão html que substitui o iframe pelo textarea fazendo com que exiba o codigo fonte, (até ai eu consegui),
depois que o usuário visualizou ou alterou ele clica novamente no botão html e retorna para o iframe (alterado pelo usuario ou não), por isso criei uma instrução if mas não resolveu o problema. :?

exibir html

var comparativo = 1; function html(){ if (comparativo == 1){ comparativo = 2; conteudo = document.getElementsByTagName('iframe')[0]; document.getElementById('teste').innerHTML = "<TEXTAREA cols='60' rows='20' ID='editor_html'>" + conteudo.contentWindow.document.body.innerHTML; + "</TEXTAREA>"; }else{ comparativo = 1; pai = documnet.getElementById('teste'); elemento = document criateElement('iframe'); txt = document.getElementByid('editor_hmtl'); elemento.appendChild(txt); pai.appendChild(elemento); //cont_iframe = window.frames['editor'].document.getElementById('editor_html'); //document.getElementById('teste').innerHTML = "<iframe id='editor' onLoad='Iniciar()' frameborder='0' src='./ferramentas/editor.html' style=' border:1px solid; width: 510px; height: 350px'></iframe>"; //restante = window.frames['editor'].conteudo.contentWindow.document.body.innerHTML; } }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

30-12-2009 18:09

Se possível coloca um exemplo funcionando online e passa o link.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

04-01-2010 11:21

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

04-01-2010 22:17

O problema então seria jogar algo para uma alvo no iframe?
Dá uma estudada nessa base também

http://www.codigosnaweb.com/forum/Edito ... _1150.html
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

06-01-2010 15:27

Cara valeu, gostei do tutorial que me mandou, adicionei nos meus favoritos, mas pesquisando descobri uma forma de exibir o codigo html sem precisar mudar o iframe por um texarea :D

segue o codigo caso ajude alguem ai.

codigo javascript:
var isHTMLMode = false; function html(bMode) { var sTmp; isHTMLMode = bMode; if (isHTMLMode) { sTmp = editor.document.body.innerHTML; editor.document.body.innerText = sTmp; } else { sTmp = editor.document.body.innerText; editor.document.body.innerHTML = sTmp; } editor.focus(); }

codigo html (o botão):

<input type="checkbox" id="html" onclick="html(this.checked)">HTML</input>

só estou com um unico problema que é que ele exibe o codigo fonte apartir do <body> editor.document.body.innerHTML e eu queria do codigo inteiro,
já tentei editor.document.all.innerHTML e não deu certo. Qual a instrução que coloco para exibir todo o html não só em partes? :star
alterei no meu site para que vcs possam testar. http://www.lsmservice.com.br/editorhtml/editor_html.php :arrow
só falta isso para o codigo ficar perfeito :-)
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

06-01-2010 15:57

Eu acho que já consegui pegar todo código do iframe, mas, não lembro o correto, mas, testa essa linha

document.getElementById('iframe').contentWindow.document.documentElement.innerHTML

Obs.: O botão no link que você indicou não funciona, pelo menos no Firefox.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

06-01-2010 16:11

Cara testei, fiz dessa forma e deu erro no fire e no ie

var isHTMLMode = false; function html(bMode) { var sTmp; isHTMLMode = bMode; if (isHTMLMode) { sTmp = document.getElementById('editor').contentWindow.document.documentElement.innerHTML; document.getElementById('editor').contentWindow.document.documentElement.innerText = sTmp; } else { sTmp = document.getElementById('editor').contentWindow.document.documentElement.innerText; document.getElementById('editor').contentWindow.document.documentElement.innerHTML = sTmp; } editor.focus(); }

Ele só funciona quando coloco body.

window.document.getElementById('editor').contentWindow.document.body.innerHTML

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

06-01-2010 16:27

Eu testei aqui da seguinte forma

<iframe name="iframe" src="teste2.html" id="iframe"></iframe> <input type="button" value="vai" onclick="javascript:alert(document.getElementById('iframe').contentWindow.document.documentElement.innerHTML)">

Rodou no IE e FF da mesma forma.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

06-01-2010 16:53

só que o objetivo é exibir e alterar o codigo fonte no iframe, da primeira forma retornou o que eu queria só com o detalhe de exibir tudo que está no body e eu quero o html inteiro, o engraçado é que qundo tentei "window.document.getElementById('editor').contentWindow.document.innerHTML", sem o body não aconteceu nada, continuou o texto sem modificação, nem notificou como erro!
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

06-01-2010 17:45

O ideal seria estudar um editor desses prontos, porque eles usam esse método.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

07-01-2010 17:54

Eu tentei estudar o editor do Joomla da parte de administrador só que é muito complexo, tem php e javascript tudo junto, cara é só esse detalhe para o editor ficar beleza "para o ie", não sei a quem recorrer mais :blush
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

07-01-2010 22:10

O mais perto que sei é o seguinte:

cria um teste.html com o seguinte:

<html> <head><title>abc</title></head> <body>conteúdo</body> </html>

Agora o arquivo que vai chamar o teste.html

<body onLoad="document.getElementById('meuiframe').contentDocument.designMode='on'"> <iframe id="meuiframe" src="teste2.html"></iframe> <input type="button" value="mostra" onclick="alert(document.getElementById('meuiframe').contentWindow.document.documentElement.innerHTML)">

Com isso você poderá editar o teste.html, e esse arquivo editado será mostrado no alert.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

08-01-2010 15:58

cara valeu mesmo, o codigo deu certo!!! :laughing

Pensando nele criei um div com um iframe, o codigo javascript substitui o iframe por um textarea, com a instrução que vc passou e deu certo até no firefox!!! :arrow
só que na hora de clicar no botão novamente e retornar para o iframe não da certo :confused
Por favor me de uma força só falta descobri isso!!! :help

segue o codigo:
var comparativo = 1; function html(){ var conteudo; // se for = a 1 me retorna o TEXTAREA se não retorna o IFRAME if (comparativo == 1){ comparativo = 2; // conteudo do iframe do editor conteudo = document.getElementById('editor').contentWindow.document.documentElement.innerHTML; // exibindo o TEXAREA com o conteudo do iframe document.getElementById('teste').innerHTML = "<TEXTAREA cols='60' rows='20' ID='editor'>" + conteudo + "</TEXTAREA>"; // até aqui funcionou bem!!! }else{ //altera o comparativo para iniciar tudo denovo comparativo = 1; //atribui a variavel conteudo o valor da variavel do textarea. É o que está dando errado e isso eu não sei o porque //fiz um teste e troquei o innerHTML por innerText e ele transformou a pagina inteira em texto. conteudo = document.getElementById('editor').contentWindow.document.documentElement.innerHTML; //Cria o iframe document.getElementById('teste').innerHTML = "<iframe id='editor' onLoad='Iniciar()' frameborder='0' src='./ferramentas/editor.html' style=' border:1px solid; width: 510px; height: 350px'></iframe>"; //insere o conteudo no editor document.getElementById('editor').contentWindow.document.documentElement.innerHTML = conteudo; } editor.focus(); }

0
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

08-01-2010 16:48

Só corrigindo,
o codigo que eu utilizei para pegar o textarea está errado invez de ser:
conteudo = document.getElementById('editor').contentWindow.document.documentElement.innerHTML;

alterei para o correto que é:
conteudo = document.getElementById('editor').value;

mas mesmo assim, está me retornando o iframe em branco, preciso saber como passar o valor para o iframe.

Tentei isso como exemplo no final do codigo para atribuir o valor:
editor.document.body.innerHTML = conteudo;

mas atualizou a pagina inteira!!!

e dessa maneira não me exibe nada o iframe retorna branco!!!
document.getElementById('editor').contentWindow.document.documentElement.innerHTML = conteudo;

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

09-01-2010 08:16

Para passar algo para o documento que é chamado por iframe testa algo assim

<iframe id="meuiframe" src="teste2.html"></iframe> <input type="button" value="mostra" onclick="document.getElementById('meuiframe').contentWindow.document.documentElement.innerHTML='aa'">

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

11-01-2010 13:30

CAra muito obrigado pela força espero que não perca a paciencia comigo.

Testei o codigo que me passou e funcionou bem no firefox no ie deu erro de pagina, outra coisa quando fui aplicar no editor ele não retornou o valor da variavel e sim em branco !!! eu não sei porque não está dando certo, vc pode dar uma olhada no codigo e ver o que está acontecendo de errado?

var comparativo = 1; function html(){ var conteudo; // se for = a 1 me retorna o TEXTAREA se não retorna o IFRAME if (comparativo == 1){ comparativo = 2; // conteudo do iframe do editor conteudo = document.getElementById('editor').contentWindow.document.documentElement.innerHTML; // exibindo o TEXAREA com o conteudo do iframe document.getElementById('teste').innerHTML = "<TEXTAREA cols='60' rows='20' ID='editor'> <html>" + conteudo + "</html></TEXTAREA>"; // até aqui funcionou bem!!! }else{ //altera o comparativo para iniciar tudo denovo comparativo = 1; //atribui a variavel conteudo o valor da variavel do textarea. conteudo = document.getElementById('editor').value; //Cria o iframe document.getElementById('teste').innerHTML = "<iframe id='editor' onLoad='Iniciar()' frameborder='0' src='./ferramentas/editor.html' style=' border:1px solid; width: 510px; height: 350px'></iframe>"; //insere o conteudo no editor document.getElementById('editor').contentWindow.document.documentElement.innerHTML = conteudo; } editor.focus(); }

0
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

11-01-2010 13:43

Cara para ficar mais facil de entender o problema, fiz um codigo similar com iframe e textare e tentei enviar o valor do textarea para o iframe, e não funcionou.
o problema parece ser facil e a resposta parece estar na minha cara e eu não consigo ver!!!

copie esse codigo e teste no firef. vai ver que retorna um texto undefined no firef.

<html> <head> <script type="text/javascript"> var conteudo = document.getElementById('editor').value; </script> </head> <body> <iframe id="meuiframe" src="teste.html"></iframe> <textarea cols='60' rows='20' ID='editor'><html><head></head><body><p>importar texto</p></body></html></textarea> <input type="button" value="mostra" onclick="document.getElementById('meuiframe').contentWindow.document.documentElement.innerHTML= conteudo;"/> </body> </html>

0
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 57

Exibir codigo fonte

11-01-2010 14:16

Cara nem precisa mais pesquisar achei a resposta, muito obrigado mesmo pela atenção e ajuda :)

Estou a um mes pesquisando sobre isso até achar a luz!!! segue o codigo, funciona no ie e no ff. para quem precisar de algo parecido

esse é um html de teste que utilizei :arrow

<HTML> <HEAD> <script> function iframe() { var iframe = document.getElementById('iframe'); var el = document.getElementById('texto'); var texto = el.value; iframe.contentWindow.document.open(); iframe.contentWindow.document.write(texto); iframe.contentWindow.document.close(); } window.onload=html(); </script> </HEAD> <body> <input type="text" id="texto"><br> <iframe id="iframe" src="teste.html"></iframe> <p><input type="button" onclick="iframe()" value="Escrever"/></p> </body> </HTML>

Esse outro foi o que apliquei no editor: :halfsmile

//altera o comparativo para iniciar tudo denovo comparativo = 1; //atribui a variavel conteudo o valor da variavel do textarea. conteudo = document.getElementById('editor').value; //Cria o iframe document.getElementById('teste').innerHTML = "<iframe id='editor' onLoad='Iniciar()' frameborder='0' src='./ferramentas/editor.html' style=' border:1px solid; width: 510px; height: 350px'></iframe>"; //insere o conteudo no editor document.getElementById('editor').contentWindow.document.open(); document.getElementById('editor').contentWindow.document.write(conteudo); document.getElementById('editor').contentWindow.document.close(); }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exibir codigo fonte

11-01-2010 22:09

Foi mal pela falta de resposta, tem andado sem tempo. Boa que conseguiu. :wink
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado