CODEWITHSUNDEEP
javascriptjqueryiframe
Charles Dahab
Charles Dahab

Reputation: 91

Remove or hide content inside of an iframe

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.

Upvotes: 0

Views: 2327

Answers (2)

Chaitanya Kale
Chaitanya Kale

Reputation: 241

@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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 3

Related Questions