Use Object or Iframe to import other sites to my site

Question

Use Object or Iframe to import other sites to my site

Navigation

#1 by (5 votes)
#2 by (4 votes)

13

I needed 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 the content).

Next, I would like to add other specific formatting to those pages I'm importing, but I could not. Is this possible?

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

html iframe

asked by anonymous 23.09.2015 / 03:49

2 answers

Automatic Deploy after Git Push What is JNDI technology?

score 5 · Answer 1

Unfortunately you will not be able to modify the content style of an iFrame that points to another domain, since you will not have access to document of it.

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

If the landing page does not accept CORS, you can use a proxy or write your own, an example proxy for CORS is 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 is an example of how to use proxy to circumvent CORS and play content within 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://pt.wikipedia.org/wiki/Constituição"></iframe>

DuetoaStackOverFlowlimitation,theaboveexamplewillnotwork,butyoucancheckitoutatthefollowing JSFiddle

Remembering that it is much simpler, to 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://pt.wikipedia.org/wiki/Constituição">

</div>

score 4 · Answer 2

You can load the contents in iFrame:

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

And then access its 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 PHP , Ruby and even jQuery know that it is possible. This would allow you to style their content and insert them directly into your site.

Maybe this is useful: