Remove or hide content inside of an iframe

Question

Why i can't hide this content from an iframe:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contents demo</title>
<script src="https://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('#logo-events').hide();
</script>

</body>
</html>

Why this is not working?

Thanks.

it probably depends on how (and probably 'when' the content of the iframe is evaluated) . Try to hide the element after the iframe have been loaded: http://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event — weirdgyn, Jul 09 '16 at 18:57

score 3 · Accepted Answer · answered Jul 09 '16 at 18:57

3

This is because the content of the iframe is on a different domain to the parent page. The browser security logic stops any attempt made by the parent to modify cross-domain content.

This cannot be avoided.

answered Jul 09 '16 at 18:57

Rory McCrossan

331,213
40
305
339

score 0 · Answer 2 · answered Jul 09 '16 at 21:14

@Rory McCrossan is right.

The only workaround I can think of is to create another page on your own domain that loads the contents of api.jquery.com and then make iframe's src point to this new page you created.

E.g. Create a page called jqueryApi.php that has the following piece of php code

<?php
    $contents = file_get_contents('http://api.jquery.com/');
    echo $contents;
?>

And then make the iframe code to be <iframe src="jqueryApi.php" width="80%" height="600" id="frameDemo"></iframe>

Remove or hide content inside of an iframe

2 Answers2