Using Object or Iframe to import other sites to my site

Question

I was needing to import several random pages from other sites to my site. Wikipedia, for example. I saw that I can use either Iframe (this worked) or Object (does not show content).

Then, I would like to add another specific formatting for those pages that I am importing, but I couldn’t. This is possible?

The project is: import the URL of the Laws, for example the Constitution and apply a new training for better reading or even annotation on the articles of law. I was hoping for a <iframe> or <object> resolve, what did not happen.

Answer 1

unfortunately you will not be able to modify the style of the contents of an iframe that points to another domain, since you will not have access to document of the same.

if the destination page allows CORS, you can make a request AJAX and paste direct HTML into some element, for example a <div>.

If the destination page does not accept CORS, you can use a proxy or write your own, an example proxy for CORS is the crossorigin, if you prefer to write your own proxy, basically make a web request on your server and return the HTML of this page using your domain.

Here’s an example of how to use a proxy to circumvent the CORS and play the content inside an 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://en.wikipedia.org/wiki/Constitution">

</iframe>

Due to a Stackoverflow limitation, the above example will not work, but you can check it in the following Jsfiddle

Remembering that it is much simpler, play the direct HTML content in a <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://en.wikipedia.org/wiki/Constitution">

</div>

Answer 2

You can upload the contents in the iframe:

<iframe id="estilizado" src="externo.html"></iframe>

And then access your elements via jQuery or Javascript:

var seuIFrame = (document.getElementById("estilizado").contentWindow || document.getElementById("estilizado").contentDocument);

if (seuIFrame.document) {
    seuIFrame = seuIFrame.document;
}

seuIFrame.body.style.backgroundColor = "#FF0000";

source:How to change the CSS of an iframe from a "parent page".

Via jQuery: How to access an iframe and its elements via jQuery?

---

In any case, there are still ways to search only the content of these sites, through the PHP, Ruby and even jQuery I know it is possible. This would allow you to style the content of them and insert them directly into your site.

Maybe this will be useful:

• The Domdocument class
• Getting data from an External webpage - stackoverflow
• Searching & Extracting Specific text in External webpage via PHP? - stackoverflow
• PHP: file_get_contents - Manual
• Ruby: Retrieve Contents of URL as string
• How to get data from an Xternal URL in jQuery? - stackoverflow