周大胖子 发表于 2018-7-4 00:17:10

iframe.contentWindow 介绍

在这里我要白话一下这个东西: 如何在 父级别页面 操控 内嵌iframe 的页面 ?
原理:
第一步:在父页面获取 iframe 的 dome 结构【其实 这个该交页面元素可能更为合适】 。
第二步:在父页面选中iframe的 元素 进行操作。
【浏览器兼容是关键 考试要考!要考!要考!】

其中。尤为重要的就是 iframe.contentWindow
参考链接:https://blog.csdn.net/skydar/article/details/51207110
总结:就是获取对象的,
例如 在火狐谷歌中:下面这句话 表示 拿到iframe中所有的元素
ofrm1 = document.getElementById("frame1").contentWindow.document;
IE嘛非此类   现在补全一个 两个页面的代码 供参考
父页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>这个页面的主要功能 就是控制 iframe 的按钮 点击提交</title>
</head>
<body>
    <h3>这个页面的主要功能 就是控制 iframe 的按钮 点击提交</h3>

<hr />
<iframe name="frame1" id="frame1" src="bt2.html" frameborder="1" height="300" width="600"></iframe>

<hr />
<h2>通过点击改变iframe 页面中的input值</h2>
<p>
    <input id="setInput" type="text" name="skm" value="" />
    <button type="button" onclick="setValue()">点击 更新iframe中 input的值</button>
    <button onclick="ifrSub()">点击提交</button>
</p>
<hr />
    <script type="text/javascript">


    function setValue()
    {
      var ofrm1 = document.getElementById("frame1").document;
      var setInput = document.getElementById("setInput")
      // //本页面中准备存入 iframe中的值
      
      alert(setInput.value)

      if(ofrm1 == undefined)
      {
            // 拿到所有页面元素
            ofrm1 = document.getElementById("frame1").contentWindow.document;
            
            //框架中值等于页面中的值
            // 注意 下一条语句 不用 var 申明
            ofrm1.getElementById("txt2").value = setInput.value

            // 这句话 是检验 是否赋值成功 可以不写
            var fva = ofrm1.getElementById("txt2").value;

            alert("firefox/chrome赋值成功,结果为:" + fva )
      }
      else
      {

            document.frames["frame1"].document.getElementById("txt2").value =setInput.value

            // 这句话 是检验 是否赋值成功 可以不写
            var fva = document.frames["frame1"].document.getElementById("txt1").value;
            alert("IE 赋值成功,结果为:" + fva )

      }
    }

    // 控制页面提交的方法
    function ifrSub()
    {
      var ofrm1 = document.getElementById("frame1").document;
      if(ofrm1 == undefined)
      {
            // 第一步拿到 iframe内的 所有元素
            ofrm1 = document.getElementById("frame1").contentWindow.document;

            // 模拟按钮点击提交
            ofrm1.getElementById('sub').click()

      }
      else
      {
            // 模拟按钮点击提交
            document.frames["frame1"].document.getElementById("sub").click();
      }
    }

</script>
</body>
</html>
iframe中:<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>按钮内嵌页面</title>
</head>
<body>
    <form action="bt3.html" method="get">
    <div>
      <input id="txt1" name="txt1" type="text" value="测试" />
      <input id="txt2" name="txt1" type="text" value="2" />
    </div>
      <button type="submit" id="sub" />提交</button>
    </form>

</body>
</html>当然 我这也涉及到的点击提交按钮 模拟iframe 的提交
所以补全dt3.html 这个 建议一块捣鼓
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>获取连接的测试</title>
    <style>
      p input{
            display: inline-block;
            line-height: 36px;
            height:36px;
            width:500px;
      }
    </style>
</head>
<body>
    <p>
      <input id="ttt" type="text" />
    </p>
    <script>
      var url = window.location.href;
      var ttt = document.getElementById("ttt");
      ttt.value = url
    </script>
</body>
</html>

周大胖子 发表于 2018-7-4 09:51:03

document.frames('reportFrame').document 不是很了解,有两个document?其中document.frames('reportFrame')指的是你当前文档中一个name属性为'reportFrame'的frame的window对象(不是DOM对象),然后接一个".document"就取得了DOM对象,这个DOM对象就是你要查找frame中ID为reportFrameForm的DOM对象的context
页: [1]
查看完整版本: iframe.contentWindow 介绍