iframe的多层调用

parent.html

        <iframe id="ReadMachine"></iframe>
        <!--read the machine state-->

$(function() {
                $("#ReadMachine").attr("src", "ReadMachine.php")
            })

ReadMachine.php

<script type="text/javascript" src="df.js"></script>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<?php
$f=["dt","xyj","jh","fs","music","kt","switch"];   //Elements must be arranged in order
for($x=0;$x<count($f);$x++){
//  open file
$myfile = fopen($f[$x], "r") or die("Unable to open file!");  //read Element state from file
//read file
echo "<input type='text' value='".fread($myfile,filesize($f[$x]))."'>";//assignment
//control parent page by file data  
echo "<script>$(function(){if($('body input:eq(".$x.")').val()==1){parent.$('body button:eq(".$x.")').parent().prev().css('background','rgba(136, 255, 45, 0.44)');parent.$('body button:eq(".$x.")').html('OFF');}else{ parent.$('body button:eq(".$x.")').parent().prev().css('background','#ffffff');parent.$('body button:eq(".$x.")').html('ON')}})</script>";//set Element state of parent page
//close file
fclose($myfile);//close file
}
?>
<script>
console.log("Df")
</script>

设置框架上级页面的元素的父级元素的属性

parent.$('body button:eq(".$x.")').parent().prev().css('background','rgba(136, 255, 45, 0.44)');parent.$('body button:eq(".$x.")').html('OFF');