How to catch an element inside an iframe?

Asked

Viewed 19,609 times

6

Why doesn’t it work .contents()?
How to catch an element inside an iframe as in the jQuery API example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>

<script>
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>

</body>
</html>
jquery css iframe

7 answers

4

In fact, it is not possible to work the content of an iframe that is in a different domain than the page that rendered it. However, to solve this problem of message exchange, there is the jquery-postmessage-plugin (http://benalman.com/projects/jquery-postmessage-plugin/), depending on your need it can be used.

It is cited in several examples on the internet to solve problems of the kind you mentioned.

  • Thanks friend, I actually need to insert a class in a div that is inside the iframe. Even the iframe domain is the same. But it’s not working like I said above.

  • @Weslleyoliveira Is the browser console showing an error message? Or is it just "crashing silently"? And in which browser are you testing?

  • 1

    @mgibsonbr So I am working within the C9.io environment, and using the browser Chrome, there is no more error. " silently failing".

  • @Weslleyoliveira Yeah, at first it was supposed to be working... I suggest trying to isolate more error: try doing console.log in: to) $( "#frameDemo" ); b) $( "#frameDemo" ).contents().find( "a" ) before calling the css; c) after calling. Edit your answer with these details.

  • 1

    Your problem may be on C9.io, you have already run tests on your browser directly ?

  • Mgibsonbr then friend, I’ve done all these table tests, and unfortunately nothing, I’m killing myself with this doubt, thank you for the force. But it has to do with http://c9.io, as our friend @Mauroalexandre says. Except I already tested on http://plnkr.co/, and it didn’t roll, I’ll resume testing.

  • Look friends http://embed.plnkr.co/yiPDhc/preview take the example that is not working.

Show 2 more comments

2


As they have said you cannot access the contents of a frame or iframe from another domain via Javascript for security reasons.

The example you put on Plunker didn’t work because the domain where the code runs is run.plnkr.co, where the URL of iframe is plnkr.co. That is, even subdomains are considered different domains.

I made a Fork functional of your Plunker creating an HTML in the same directory and placing it in the iframe.

Note that I used the event load() to wait for page loading iframe.

1

You can even exchange messages between the parent page and the iframe. Only, for this, you need to have access to the source code of the iframe. If you have this access, I have some examples that can help you (I had to do this several times). If not, for safety reasons you really won’t be able.

0

You can only manipulate iframes that are on the same domain, or by changing the iframe headers by the server.

0

You cannot fetch data from external domains using jquery. Try Curl library of PHP.

0

You can manipulate that way:

jQuery(“.iframeMain”, window.parent.document)

check the site with the example

0

Access to iframes and frames only possible when the full domain is equal (this includes subdomain and port). If one of these is different your browser will ignore any access to the target’s DOM, considering a security breach.

It is possible to communicate using window.postMessage described in HTML5, but older browsers do not support such a feature.

You can read more on https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage which also contains a reference to browsers that support the feature and its limitations.

One remark about your code is that it may also be running before your DOM iframe be rendered. The iframe has asynchronous loading relative to the window it’s in, so to make sure the element exists in your frame, wait for the event load of iframe to search the DOM. (remembering that the domains have to be identical)

Browser other questions tagged jquery css iframe

You are not signed in. Login or sign up in order to post.