infelizmente você não vai conseguir modificar o estilo do conteudo de um iFrame que aponta para outro dominio, uma vez que você não terá acesso ao document
do mesmo.
caso a pagina de destino permita CORS
, você pode fazer uma requisição AJAX
e colar o HTML direto em algum elemento, por exemplo uma <div>
.
Caso a pagina de destino não aceite CORS, você pode usar um proxy ou escrever o seu proprio, um exemplo de proxy para CORS é o crossorigin
, caso prefira escrever o seu proprio proxy, basicamente faça uma requisição Web no seu servidor e retorne o HTML desta pagina usando o seu dominio.
Segue um exemplo de como usar um proxy
para burlar o CORS
e jogar o conteudo dentro de um iFrame...
var CORSFrame = function (iFrame) {
var self = this;
this.onload = null;
this.iFrame = iFrame;
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", self.corsProxy + self.iFrame.dataset.src, false);
httpRequest.addEventListener("readystatechange", function (event) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var template = document.createElement("template");
template.innerHTML = httpRequest.responseText;
var content = template.content.getElementById("content");
var blob = new Blob(['<meta charset="utf-8">' + content.outerHTML], {
type: 'text/html;'
});
var bUrl = URL.createObjectURL(blob);
self.iFrame.src = bUrl;
}
}
});
httpRequest.send();
}
CORSFrame.prototype.corsProxy = "http://crossorigin.me/";
var iFrames = document.querySelectorAll("iframe[data-src]");
[].forEach.call(iFrames, function (iFrame, indice) {
var corsFrame = new CORSFrame(iFrame);
iFrame.addEventListener("load", function (event) {
var doc = iFrame.contentWindow.document;
doc.body.style.backgroundColor = "black"
doc.body.style.color = "white";
})
});
html, body {
overflow: hidden;
}
html, body, iframe {
margin: 0px;
padding: 0px;
border: 0px none transparent;
width: 100%;
height: 100%;
box-sizing: border-box;
}
<iframe id="wikipedia" data-src="https://pt.wikipedia.org/wiki/Constituição">
</iframe>
Devido a uma limitação do StackOverFlow, o exemplo acima não vai funcionar, mas você pode conferir ele no seguinte JSFiddle
Lembrando que é bem mais simples, jogar o conteudo HTML direto em uma <div>
.
var CORSFrame = function (element) {
var self = this;
this.onload = null;
this.element = element;
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", self.corsProxy + self.element.dataset.src, false);
httpRequest.addEventListener("readystatechange", function (event) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var template = document.createElement("template");
template.innerHTML = httpRequest.responseText;
var content = template.content.getElementById("content");
self.element.innerHTML = content.outerHTML;
}
}
});
httpRequest.send();
}
CORSFrame.prototype.corsProxy = "http://crossorigin.me/";
var elements = document.querySelectorAll("[data-src]");
[].forEach.call(elements, function (element, indice) {
var corsFrame = new CORSFrame(element);
});
html, body {
overflow: hidden;
}
[data-src] {
overflow: auto;
}
html, body, [data-src] {
margin: 0px;
padding: 0px;
border: 0px none transparent;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#wikipedia {
background-color: black;
color: white;
}
<div id="wikipedia" data-src="https://pt.wikipedia.org/wiki/Constituição">
</div>