时间戳

首页 > 解决方案 > jQuery 无法修改通过 src 加载的 iframe 内容的子 dom

jquery - jQuery 无法修改通过 src 加载的 iframe 内容的子 dom

问题描述

我试图从 iframe 中加载的页面中修改（特别是删除）DOM 元素。我已经看到这个问题被问了很多次，但我根本没有做对。这是一个跨站点，所以不能使用 jQuery AJAX。iFrame 加载正常，但在使用 jQuery 加载子 dom 后，我无法访问它。- 作为下面的测试，当我单击按钮时，我应该清除子 dom（或 iframe 内容）中的 body 标签，但这似乎没有任何影响：

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

为了说明，这里是一个工作示例：https ://jsfiddle.net/3u6y5j94/1/

我究竟做错了什么？

标签： jqueryiframe

解决方案

推荐阅读