Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Urgente, Iframe: CSS não está afetando os itens internos, só a TAG <iframe>

por William Oliveira Camelo
| 209k xp | 35 posts

Boa tarde,

Fiz um sistema de cadastro que possui o cadastro de alguns itens e logo a baixo mostra uma tabela com esses itens cadastrados.

Como foi feito:

HTML, CSS e JQuery para layout SQL para BD JSP para fazer a comunicação => Não adianta sugerir outra coisa, estou travado por questões de compatibilidade, tem que ser JSP.

Criei a página inicial com as opções, que chamam os respectivos .JSP que executam as QUERY... Até aí tudo funcionando perfeito, no entanto, para a tabela que está a baixo do formulário ser atualizada, eu teria que atualizar a página inteira, ou seja, a cada INSERT ou DELETE, a página ficava branca cerca de 1s... E isso é extremamente irritante para alguém que quer incluir uns 10 itens...

Solucionei jogando a tabela para um < iframe> e dando refresh só nela, mas aí veio o problema do CSS. Ou seja, a responsividade da TAG < iframe> está 100%, aumenta e diminui de acordo com a porcentagem da página, porém, a

dentro dele não, ela continua com tamanho fixo... E o pior, quando aumento o ZOOM, ela acaba sendo cortada dentro da TAG.

Alguém pode me ajudar, é um tanto urgente... Pois não tenho prazo para refazer as coisas. Obrigado!

2 respostas
solução!
por Carol Curcelli
| 69.3k xp | 20 posts
Instrutor Líder de Desenvolvimento Front-End

Boa tarde, William!

Bom, por questões de segurança, é impossível você alterar o conteúdo ou estilos de alguma coisa inserida via iframe. Além disso, iframe é uma tecnologia insegura e com usabilidade ruim. Não se deve mais usá-la hoje em dia.

O que deve solucionar o seu problema é usar AJAX. Com AJAX, ao mandar uma submissão pelo formulário, o JS faz uma requisição no back-end e, ao invés de atualizar a página inteira a cada CREATE/GET/DELETE, ele apenas adiciona uma linha nova na sua tabela.

Usando AJAX, seu código ficará parecido com isso:

var variableName = function(x){
        var endpoint = `https://website.com.br/ws/${x}/json/`
        $.ajax({
            url: endpoint,
            method: "GET",
            dataType: "json",
            error: genericError,
            success: getAddressSuccess
        }); 
    }
por William Oliveira Camelo
| 209k xp | 35 posts

Infelizmente tive de continuar no iframe por questão de tempo, procurei um CSS que fizessem o que pretendia e quando sobrar um tempo farei um refactoring.