how to get content of div in a html from another html

Question

I have two html file

a.html
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>  
  </head>
  <body> 
    <div id="content">
        hello every one
    </div>
  </body>
</html>

and another page

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>  
  </head>
  <body> 
    <div id="result">

    </div>
    <iframe id="ifr" src="http://example.com/a.html">
    </iframe>
    <script type="text/javascript">
        divv = $('#ifr').contents().find('div#content').clone();
        $('#result').html(divv.html());
    </script>
  </body>
</html>

In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.

Are you permitted to use the `iframe` source? Any access origin errors/warnings? — Shaunak D, Jun 10 '14 at 17:50
You should have said that from the word go. When you say 'I have two html file' you're saying they are on your server ---- same domain. So that's a LIE. — PeterKA, Jun 10 '14 at 18:05
Duplicate [http://stackoverflow.com/questions/9963799/ajax-jquery-load-webpage-content-into-a-div-on-page-load](http://stackoverflow.com/questions/9963799/ajax-jquery-load-webpage-content-into-a-div-on-page-load) — ncksllvn, Jun 10 '14 at 18:07
I'm sorry but I have two template page on the same domain, and I want to use second one from first one, so the second one must be render to ready for use. — user3726821, Jun 10 '14 at 18:14

PeterKA · Accepted Answer · 2014-06-10T18:03:23.753

0

You do not need to use an iframe; you can use ajax to do that. It's very straight forward.

$(function() {
    $('#result').load('a.html #content',function()
        $(this).html( $('#content').html() );
    });
});

EDIT

As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.

In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.

edited Jun 10 '14 at 18:03

answered Jun 10 '14 at 17:52

PeterKA

24,158
5
26
48

That's because you're trying to retrieve a page from another domain. To use ajax, the two pages have to be on the same domain or the source server has to allow the destination server to get pages from it. That's why it's important to give enough information. :) – PeterKA Jun 10 '14 at 18:01
I have two template page on the same domain, and I want to use second one from first one, so the second one must be render to ready for use. – user3726821 Jun 10 '14 at 18:07
Not sure I fully understand your question ... a two template page?!! What's that? If you have two pages on same domain, you can use the code I provided. – PeterKA Jun 10 '14 at 18:11
I believe `django` would have been a useful tag to include with your question, even though I doubt it would make a difference considering the code you've provided. – PeterKA Jun 10 '14 at 18:18

score 0 · Answer 2 · answered Jun 10 '14 at 18:02

0

I guess that could be the right way.

var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);

answered Jun 10 '14 at 18:02

Vladimir Tagai

321
1
2
13

I've just read about cross-domains. http://stackoverflow.com/questions/6170925/get-dom-content-of-cross-domain-iframe – Vladimir Tagai Jun 10 '14 at 18:06

how to get content of div in a html from another html

2 Answers2