Show div from another website

Question

Is there a way to use an iframe or some other method of showing a named div from another website?

I want to pull in some data from a government website into a google map and when they click the point I want the information from one of the divs on that page to display.

Stinkweed

Answer 1

I take assumption that you are sure of div's ID in that other website.

If yes. use Jquery Ajax to pull the site's content into a hidden iframe in your site. then fetch the content of the div-in-question into some variable and then you can use it for your purpose (parse html table data or do whatever)

Discard the iframe's content so that you don't have unnecessary items in your page's DOM.

Amour

I tried something similar before and found out that firefox won't allow you to access content of iframe fetched from another website. (same cross-domain restrictions again) Not sure if I did anything wrong. – Tolu

Answer 2

Using JQuery, you should be able to exactly that with the load-function.

Here is a small example to get a container with id "container" on a page called Test.html:

$('#contentDiv').load('/Test.html #container');

You can visit the JQuery documentation here for more info.

Superfetation

Didn't think of that one. Its way easier. +1 – Amour

As far as I can see the load functions like a normal .get() function call but handles everything after the first space in the url as an selector for the part it returns. But I haven't explored it fully. – Superfetation

Answer 3

1. Ajax Call
2. In-House Service to Scrape the HTML from the page
3. Select the div with xpath / SGML parser
4. Return to ajax call-handler
5. Replace the content of your div

However There are other problems, i.e. scraping someone's site for their content without their permission is BAD.

They may or may not care, but still you should seek permission, or one day you could find your webserver blacklisted from their site. Or worse... Especially a government site.

You should probably go about figuring out how to properly obtain the data you need (perhaps there's an api somewhere) and then render your own version.

Dorcus

Answer 4

You would have to make use of either JSONP or a middle-agent to retrieve the data (i.e. a PHP script using the CURL library).

JSONP functionality is included in numerous Javascript libraries such as MooTools and jQuery. That is the method I would use.

MooTools: http://mootools.net/docs/more/Request/Request.JSONP

jQuery: http://docs.jquery.com/Release:jQuery_1.2/Ajax

Once you have retrieved the body of the page the DIV resides on, you could use REGEX to extract the information from the specific DIV element.

Coley

Answer 5

Here is an alternative that requires no external libraries of any sort; just vanilla HTML and JS.

<script>
fetch('https://example.com/webpage-url') // Include the complete URL to the webpage featuring the div of interest.
  .then(response => response.text())
  .then(html => {
    let parser = new DOMParser();
    let doc = parser.parseFromString(html, 'text/html');
    let divToEmbed = doc.querySelector('#target-div-id'); // See Note A.
    let container = document.getElementById('container'); // See note B.
    container.appendChild(divToEmbed);
  })
  .catch(error => console.error(error));
</script>

<div id="container"><!-- Leave empty; imported div goes here. --></div>

Because the code doesn't exploit any external tools, it is rather bulky, so you might want to include it in a separate file and link that to your HTML document: <script src="script.js"></script>

Note A. If the div you're trying to embed from another website doesn't have an ID, just use one of its classes as long as no other div in the webpage document also has that same class name. If the only classes available are shared by other divs, narrow down your query by selecting more class names. To do that, you should not separate the class names using commas, but rather string them together without spaces, e.g. .class1.class2.class3. This ensures that only the div which is in all of those classes will be selected.

Note B. You can rename "container" to whatever you want, as long as the placeholder div in your HTML has a consistent ID. You could also use a class name, by replacing getElementById with getElementByClassName. I recommend using IDs for this type of stuff, though.

Note C. If the website you're importing your div from does not allow CORS (Cross-Origin Resource Sharing), this solution will not work.

Discerning