JQuery Find HTML Content inside iFrame

Question

I want to find a HTML Content inside iFrame. I've following this code but seems doesn't works :

$('#iviFrame1').contents().find('#iViTag1').html();

I do on Firefox Console after iFrame load completely.

I also check my iFrame and contents inside it and found div with id iViTag1 :

<iframe
    id="iviFrame1"
    name="iVi Dashboard"            
    longdesc="iVi - Your Personal Dashboard"
    style="display:inline"
    src=""
    width="100%"
    height="98%"
    align="middle"
    frameborder="0"
    marginwidth="0"
    marginheight="0"
    scrolling="auto"></iframe>

inside an Iframe :

<div id="iViTag1" style="display: none;"></div>

I've do $('#iviFrame1').contents().find('#iViTag1').html(); on Firefox Console and the console output underfined

here what I tried :

$('#iviFrame1').contents();
Object { length: 0, prevObject: {…}, context: HTMLDocument http://localhost:8080/WS_ivi/?p=8&o={7f377407-04cc-464e-ac78-17738486e94a}&v=1.7.5.8 }
$('#iviFrame2').contents().find('#iViTag1');
Object { length: 0, prevObject: {…}, context: HTMLDocument http://localhost:8080/WS_ivi/?p=8&o={7f377407-04cc-464e-ac78-17738486e94a}&v=1.7.5.8, selector: "#iViTag1" }

$("#iViTag1");
{…}
context: HTMLDocument http://localhost:8080/WS_ivi/?p=8&o={7f377407-04cc-464e-ac78-17738486e94a}&v=1.7.5.8
selector: "#iViTag1"
__proto__: Object { jquery: "2.1.4", constructor: n(), length: 0, … }

By the way, I used Firefox Quantum 57, JQuery 2.1.4 and my iFrame SRC comes from different IP. I used localhost and the iFrame SRC from another server.

I've followed any methods and doesn't works. If I check from inspector, I see the iViTag1 exist.

Any suggestion?

score 0 · Answer 1 · answered Jan 24 '18 at 03:31

0

Best guess is you aren't using a load event handler to allow iframe page to load before looking for elements:

$(function()
    $('#iviFrame1').on('load', function(){
       var $iV = $(this).contents().find('#iViTag1');
       console.log('iv len=', $iV.length)
    });
});

answered Jan 24 '18 at 03:31

charlietfl

170,828
13
121
150

I do it on Firefox console after all view on iFrame completely loaded. I thought it must be works. isn't it? – Yohanim Jan 24 '18 at 03:33
just noticed you say is from another IP...different domain also? Can't access cross domain iframe due to *"same origin policy"* – charlietfl Jan 24 '18 at 03:33
Like i mentioned you before, I tried to localhost and set iFrame src to IP Address, let say `172.20.x.xxx`. – Yohanim Jan 24 '18 at 03:36
OK...even if that resolves to localhost , if page is on localhost it will still be considered different origin by browser – charlietfl Jan 24 '18 at 03:36
I accessed my localhost and the src comes from some IP Address, so is it different domain? – Yohanim Jan 24 '18 at 03:38
Is it any other way? I don't see any warning on Console. From your code. I got `iv len= 0` – Yohanim Jan 24 '18 at 03:40

MicFin · Answer 2 · 2018-01-24T04:25:33.007

0

It could be giving you errors because of:

Iframe doesn't belong to same domain.
You are trying to read it before Iframe load event.

See jQuery/JavaScript: accessing contents of an iframe

You may need to look into Ways to circumvent the same-origin policy

edited Jan 24 '18 at 04:25

answered Jan 24 '18 at 03:33

MicFin

2,431
4
32
59

For point number 1, I used Glassfish on localhost server and set the src iFrame to some IP Address, let said 172.x.x.xxx. is it about CORS? Is there any others way? – Yohanim Jan 24 '18 at 03:40
Yes it is about CORS. That would be cross-site scripting, which is prohibited for security reasons. You would need to use a proxy: feed the HTML in the IFRAME verbatim through your site so it's no longer cross-site from the browser's perspective. See further discussion here https://stackoverflow.com/a/364997/2842709 – MicFin Jan 24 '18 at 03:46
I thought is it hard to do. Is kinda a bypassing security. Have you tried that? – Yohanim Jan 24 '18 at 03:52
not at all trivial writing a proxy that loads all the resources in a page...been there done that!! – charlietfl Jan 24 '18 at 03:56
https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy – MicFin Jan 24 '18 at 04:25

JQuery Find HTML Content inside iFrame

2 Answers2