0

Im trying to modify (specifically remove) a DOM element from a page loaded in a iframe. I have seen this question being asked numerous times but I simply am not getting it right. It's a cross site so cannot use jQuery AJAX. The iFrame loads fine, but I am not able to gain access to the child dom after it has been loaded using jQuery. - As a test below, when I click the button I am supposed to clear the body tag in the child dom (or iframe contents) but this does not seem to have any affect:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container-fluid">
<div class="container">
    <button class="btn btn-info esmolink">Click here to test</button>
    <iframe id="esmoIframeContainer" src="https://approvals.acme.graphics" allowfullscreen="true" width="100%"  height="500px"></iframe>
</div>
</div>
<script>
$(document).ready(function() {
    $("body").on("click","esmolink",function() {
        var doc = $('#esmoIframeContainer').contents().find("body").html("");
        console.log(doc);
    });

});
</script>
</body>
</html>

To illustrate, here is a working sample: https://jsfiddle.net/3u6y5j94/1/

What am I doing wrong?

mauzilla
  • 3,574
  • 10
  • 50
  • 86
  • What you're trying to do is not possible. You cannot modify the content of cross-domain iframes for obvious security reasons. – Rory McCrossan May 05 '20 at 18:32
  • As we own the cross domain, is this something I can configure in IIS to allow for this to be possible? – mauzilla May 06 '20 at 09:23
  • Still no. *However*, as you own both sites you can use `postMessage` instead, but it's a completely different pattern to the one you're using now. See this answer: https://stackoverflow.com/a/9393545/519413. MDN also has a good article on it – Rory McCrossan May 06 '20 at 09:29

0 Answers0