master

分支 (2)

管理

管理

master

develop

iframe
/
main.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>main</title>
<style type="text/css">
  .main-box{
    margin:10px;
    padding:10px;
    border:1px solid red;
  }
  .main-box a{
    padding:0 8px;
  }
  .input-cls{
    padding:3px 8px;
    outline: none;
    border:1px solid #f90;
    border-radius:1px;
  }
  iframe{float:left;width:48%;height:500px;margin-left:1%;border:1px solid #eee;background:#ddd;display:table-cell;}
</style>
</head>
<body>
    <div class="main-box">
      <h1>main</h1>
      <input type="text" id="inputDom" class="input-cls" oninput="sendToChildVal(this.value)" placeholder="输入自动发送给子frame">
      <a href="javascript:void(0);" onClick="callIframeMethod();">调用子iframe方法</a>
      <a href="javascript:void(0);" onClick="callIframeField();">调用子iframe变量</a>
      <a href="javascript:void(0);" onClick="callIframeHtml();">调用子iframe组件</a>
    </div>
    <iframe id="frame" name="frame" src="./frame.html" frameborder="0"></iframe>
    <iframe id="newFrame" name="newFrame" src="./newFrame.html" frameborder="0"></iframe>

    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      var gg="这是main.htmll变量";
      function ggMM() {
          console.log(gg);
      }
      function callIframeMethod() {
          // js
          document.getElementById("frame").contentWindow.test();
          // jq
          $("#frame")[0].contentWindow.test(); //用jquery调用需要加一个[0]
      }
      function callIframeField() {
          // 以下两种方法可以达到同样的效果
          console.log($("#frame")[0].contentWindow.ff);
          console.log(frame.window.ff);
      }
      function callIframeHtml() {
          // 以下两种方法可以达到同样的效果
          console.log($("#frame")[0].contentWindow.$("#dd").val());
          console.log(frame.window.$("#dd").val());

          var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
          console.log(t);

          // var t = document.getElementById('frame').contentWindow.document.getElementById('dd');

          //console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
          //console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
      }
      function sendToChildVal(value) {
          $("#frame")[0].contentWindow.hellobaby=value
          // js
          document.getElementById("frame").contentWindow.getParaentVal();
          // jq
          // $("#frame")[0].contentWindow.test(); //用jquery调用需要加一个[0]
      }
  </script>
</body>
</html>