时间戳

首页 > 解决方案 > 使用 jquery 或 javascript 访问 iframe HTML DOM

javascript - 使用 jquery 或 javascript 访问 iframe HTML DOM

问题描述

我已经看到一些关于使用 javascript 和/或 jquery 访问 iFrame 中的 HTML DOM 的线程，但这些对我不起作用。这是我正在测试的示例：

这是 HTML 文件 iframe.html：

<!DOCTYPE html>
<html>
<body>
body1
<div id="mydiv" style="background-color: red">
   div text red bg
   <h1 style="background-color: gray">IFRAME gray bg </h1>
</div>
body2

</body>
</html>

这是带有javascript和jquery测试的测试代码：

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="iframe.html"></iframe>

<div id="demo">div area</div>

<p>Click the button to change the iframe color.</p>
<button id="jq_btn" >exec jquery</button>
<button id="js_btn" onclick="myFunction()" >exec javascript</button>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#jq_btn").click(function(){
    $("body").css( "background-color", "yellow" );
    $("body").css( "color", "blue" );
    $("div").css( "background-color", "orange" );
    $( "iframe" ).contents().filter( "body" ).css( "background-color", "blue" );
    $( "iframe" ).contents().find( "body" ).css( "background-color", "blue" );
    $("#myframe").contents().filter( "h1" ).css( "color", "green" );
    $("#myframe").contents().find( "h1" ).css( "color", "green" );
  });
});

function myFunction() {
  //alert('myFunction');
  var iframe = document.getElementById("myframe");
  var elmnt = iframe.contentWindow.document.getElementsByTagName("div")[0];
  elmnt.style.display = "none";
}
</script>

</body>
</html>

但是这些示例都没有成功访问 iframe 内容。javascript 示例似乎无法在指令中访问“文档”对象iframe.contentWindow.document

有人可以告诉我在这两种情况下我做错了什么吗？

谢谢，道格

标签： javascripthtmljqueryiframe

解决方案

推荐阅读