JSFiddle - React, Tailwind, and code Playground
HTML
<iframe id="wikipedia" data-src="https://pt.wikipedia.org/wiki/Constituição">
</iframe>
CSS
html, body {
overflow: hidden;
}
html, body, iframe {
margin: 0px;
padding: 0px;
border: 0px none transparent;
width: 100%;
height: 100%;
box-sizing: border-box;
}
JavaScript
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";
})
});