深层iframe的body修改

最新推荐文章于 2022-04-05 21:34:03 发布

古德赫赫

最新推荐文章于 2022-04-05 21:34:03 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： html js iframe

本文链接：https://blog.youkuaiyun.com/weixin_41880430/article/details/82143541

js 专栏收录该内容

1 篇文章

订阅专栏

        //通过id获取当前document下的某一个iframe的document对象
        var textDoc1 = document.getElementById("text-frm").contentDocument;
        var textDoc2 = textDoc1.getElementById("TRS_Editor___Frame").contentDocument;
        //通过标签名获取当前document下的某一个iframe的document对象
        var textDoc3 = textDoc2.getElementsByTagName("iframe")[0].contentDocument;
        //修改body中的值
        textDoc3.body.innerHTML="古德赫赫";

这种方法貌似ie不支持，又换了一种：

        var textDoc1 = document.getElementById("text-frm").contentWindow;
        console.log(textDoc1);
        var textDoc2 = textDoc1.document.getElementById("TRS_Editor___Frame").contentWindow;
        var textDoc3 = textDoc2.document.getElementsByTagName("iframe")[0].contentWindow.document;
        textDoc3.body.innerHTML=text1;
        textDoc3.body.innerHTML="古德赫赫";

之后用ie测试此方法的时候还是会有null出现，所以加上window.top

        var textDoc1 = window.top.document.getElementById("text-frm").contentWindow;
        console.log(textDoc1);
        var textDoc2 = textDoc1.document.getElementById("TRS_Editor___Frame").contentWindow;
        var textDoc3 = textDoc2.document.getElementsByTagName("iframe")[0].contentWindow.document;
        textDoc3.body.innerHTML=text1;
        textDoc3.body.innerHTML="古德赫赫";

再次测试还是不行，改成如下方式：

        var textDoc1 = window.top.document.getElementById("text-frm").contentWindow;
        var textDoc2 = textDoc1.frames[7];
        var textDoc3 = textDoc2.frames[1];                      
        textDoc3.document.body.innerHTML="古德赫赫";

最后发现是ie浏览器的版本导致编辑器的iframe有的没有加载出来，测试发现需要ie 8-10的版本支持,谷歌就并没有这些问题，心好累。。。

另外在查找资料的过程中看到了一个iframe的用法挺好的，记下来：

         <ul class="nav nav-list">
                <li class="active parent_li"><a href="BSwelcome.aspx" target="mainframe"></li>
                <li class="parent_li"><a href="MyContacts/MyInfoAssitant/BSMyInfoList.aspx?jb_id=&grade=all&&paixu=no&regs=dd&cup=1" target="mainframe"></a></li>
                <li class="parent_li"><a href="MyContacts/MyOrder/BSMyOrderList.aspx?cup=1&&sel=no" target="mainframe"></a></li>
                <li class="parent_li"><a href="MyContacts/SubmitOrder/BSSubmitOrderList.aspx?cup=1" target="mainframe"></a></li>
 </ul>
        <iframe id="ifrma1" src="BSwelcome.aspx" name="mainframe" frameborder="no" scrolling="yes"
                style="width: 100%; height: 100%;"></iframe>

通过a标签切换iframe,一般iframe要有id值，name值,而a标签链接了地址，还要多一句 target=”mainframe” 而mainframe就是iframe的name值。才不至于点击a标签直接跳过去。
此方法引用自：https://www.cnblogs.com/suizhikuo/p/4961780.html