Trocar iframe e frame por js

Malmsteen · Abril 10, 2015

Olá pessoa,

Tenho uma idéias e não estou conseguindo implementar.

Primeiro:

Tenho uma página que é divida em duas partes:

na parte à esquerda eu tenho um painel vertical com algumas opções e menus.

na parte a direita fica uma tela maior onde são apresentadas a ações do que é feito na tela à esquerda.

exemplo:o usuário clica em um botão salvar tela como imagem

a tela a direita muda e abre uma outra tela(ajax) com o print da tela anterior e a url da pagina é salva.

Utilizo isto porque estou implementando um sistema de inspeção de usabilidade.

https://www.dropbox.com/s/4pdsflofcdwync0/1.png?dl=0

https://www.dropbox.com/s/l8y7tsxm6q5md4y/2.png?dl=0

O que já fiz?

tudo menos a parte de printscreen da tela à direita e fazer os comandos da tela a esquerda funcionarem na tela à direita. :(

como posso implementar isto? algum exemplo? tutorial? algum norte...

E quanto ao iframe e frame eu quero substituir por javascript...mas tem que ter o mesmo efeito, tipo poder navegar na tela sem interferir na tela à esquerda...

quero sair do iframe e frame pois alguns sites não permitem o uso disto, ae eles não aparecem na tela à direita quando entro com a url deles no frame ou iframe.

Grato à quem cooperar comigo.

Editado Abril 10, 2015 por Malmsteen

Malmsteen · Abril 12, 2015

Resolvi com isto:

<html>
<head>
<script type="text/javascript">
try{
xmlhttp = new XMLHttpRequest();
}
catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E){
xmlhttp = false;
}
}
}
div_base = "";
function abre(arquivo,metodo,div){
div_base = div;
xmlhttp.open(metodo,arquivo);
xmlhttp.onreadystatechange=conteudo
xmlhttp.send(null)
}
function conteudo() {
nova_div = div_base;
document.getElementById(nova_div).innerHTML="<div style='top:50%;left:50%;position:absolute;'>carregando...</div>"
if (xmlhttp.readyState==4){
document.getElementById(nova_div).innerHTML=xmlhttp.responseText
}
}
</script>
</head>

<body>
<a href="javascript: abre('contato.html','GET','conteudo');">Link 1</a>
<a href="javascript: abre('coisa.html','GET','conteudo');">Link 2</a>
<a href="javascript: abre('seila.html','GET','conteudo');">Link 3</a>

<div id="conteudo">

Aqui você coloca as coisas da página inicial, quando clicar no l-i-n-k do menu(que está ali em cima),
a página que que está no l-i-n-k abre nesse lugar. Pronto , frame substituído.

</div>
</body>
</html>

Malmsteen · Abril 12, 2015

E com isto também:

// JavaScript Document
var Ajax = false;

//fucao cria obejto ajax
function AjaxRequest() {
Ajax = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
Ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
Ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
Ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
}

function AbrePagina(url) {
//cria o objeto Ajax para conexao com o servidor, independente do navegador
AjaxRequest();
if (!Ajax) {
alert("Erro ao criar objeto ajax!");
return;
}

document.getElementById("ConteudoPaginaPrincipal").innerHTML = "carregando1"; // Preenche a div carregando enquanto o State não é 4
//passa qual funcao esxecuta no na resposta do servidor
Ajax.open('GET', url, true);

Ajax.onreadystatechange = respAbrePagina;

// caso o metodo seja POST enviar os dados no Ajax.send(dados);
Ajax.send(null);
}

function respAbrePagina() {
if (Ajax.readyState == 4) {//respondeu
if (Ajax.status == 200) {//recebe xml
//pode ser XML var xml = Ajax.responseXML;
var resp = Ajax.responseText;
document.getElementById("ConteudoPaginaPrincipal").innerHTML = resp; // Preenche a div carregando enquanto o State não é 4
} else {
alert('Erro na resposta do servidor\n Erro: ' + Ajax.StatusText);
}
}
}

Entrar

Trocar iframe e frame por js

Pergunta

Malmsteen

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Malmsteen

Link para o comentário

Compartilhar em outros sites

Malmsteen

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades