iFrame é uma forma muito conveniente de mostrar um conteúdo externo na sua página web. No entanto, é um pouco complicado se você quiser adicionar adicional ou alterar o estilo CSS existente. Você não pode simplesmente adicionar CSS na página pai / wrapper. Neste tutorial, vamos mostrar-lhe como usar JavaScript para injectar CSS em iFrame.
no excerto abaixo, uma vez que tudo foi carregado, vamos obter o elemento iFrame por ID. Em seguida, obter o contentDocument e injetar nossos estilos em iFrame usando innerHTML.,ou pode fazê-lo com jQuery.
$("#myiFrame").on("load", function() { let head = $("#myiFrame").contents().find("head"); let css = '<style>/********* Put your styles here **********</style>'; $(head).append(css);});
exemplo
por exemplo, aqui está a página de tutorial 3d CSS Progressbar que queremos adicionar ao nosso usando iframe.
<iframe width="1024px" height="768px" src="http://127.0.0.1:5501/bar"></iframe>
Suponha que queremos alterar o comprimento da barra de progresso para 45%. Infelizmente, não podemos fazer algo assim do nosso Pai CSS.
.bar { width: 45%; /* This will not work */}
vamos tentar usar JavaScript. É importante que espere até que o iFrame seja carregado antes de poder injectar o CSS., Neste caso, vamos colocar o código no leitor de eventos.
Aqui está o resultado.
adicionar um ficheiro CSS à iFrame
pode adicionar um ficheiro CSS inteiro em vez de injectar estilos separados, criando uma ligação e adicionando-o à cabeça da iframe.