使用jquery或javascript访问iframe HTML DOM_Javascript_Html_Jquery_Iframe

使用jquery或javascript访问iframe HTML DOM

javascript html jquery iframe

使用jquery或javascript访问iframe HTML DOM,javascript,html,jquery,iframe,Javascript,Html,Jquery,Iframe,我看到过一些关于使用javascript和/或jquery在iFrame中访问HTMLDOM的线程，但这些线程对我不起作用。以下是我正在测试的示例：以下是HTML文件iframe.HTML： <!DOCTYPE html> <html> <body> body1 <div id="mydiv" style="background-color: red"> div text red bg <

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

以下是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>


车身1
div文本红色背景
IFRAME灰色背景
车身2

以下是带有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颜色
执行jquery
执行javascript
$（文档）.ready（函数（）{
$（“#jq_btn”）。单击（函数（）{
$（“body”）.css（“背景色”、“黄色”）；
$（“body”）.css（“颜色”、“蓝色”）；
$（“div”）.css（“背景色”、“橙色”）；
$（“iframe”）.contents（）.filter（“body”）.css（“背景色”、“蓝色”）；
$（“iframe”）.contents（）.find（“body”）.css（“背景色”、“蓝色”）；
$（“#myframe”）.contents（）.filter（“h1”）.css（“颜色”、“绿色”）；
$（“#myframe”）.contents（）.find（“h1”）.css（“颜色”、“绿色”）；
});
});
函数myFunction（）{
//警报（“myFunction”）；
var iframe=document.getElementById（“myframe”）；
var elmnt=iframe.contentWindow.document.getElementsByTagName（“div”）[0]；
elmnt.style.display=“无”；
}

但这两个示例都无法成功访问iframe内容。 javascript示例似乎无法访问指令

iframe.contentWindow.document

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

谢谢，

Doug

iframe和page是否共享同一来源（域、协议子域等）？您看到的具体错误是什么？您没有访问iframe的权限dom@GetSet如果相同的源代码有意义，则不正确。我遵循link@charlietflThanks，将上述两个示例放在同一个目录中，并使用javascript/jquery启动一个。然后，我按下按钮执行“execjquery”，它会在iframe外部着色，但不会在内部着色。我在本地系统上尝试了，但是“Iframe heading”没有变为红色。