JS跨域访谈操作iframe,innerHTML为br_javascript技能_脚
分类:pc28.am

复出如下: 复制代码 代码如下:

安装iframe的document.designMode为On能够让其可编写制定,日常用在富文本编辑器组件中。这里仅列出各浏览器差距。重现如下:

诸两人平昔都有个主张,假诺可以随意的操作iframe就好了。那样静态页面也就有了风度翩翩对黄金年代于后台动态页面php,jsp,asp中include,require实现合併多页面构造的力量。

设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

<!doctype html>
<html>
    <head>
        <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title>
        <meta charset="utf-8">
    </head>
    <body>
        <iframe frameborder="1" style="height: 330px;"></iframe>
        <script>
            var ifr = document.getElementsByTagName('iframe')[0];
            var doc = ifr.contentWindow.document;
            function prif() {
                console.log(ifr.contentWindow.document.body.innerHTML);
            }

            function changeDesignMode() {
                ifr.contentWindow.document.designMode = 'On';
            }

            prif();
        </script>
    </body>
</html>

透过Javascript的相助大家得以像后台类似动态加载操作iframe对象属性src指向的html页面包车型地铁始末。那样的操作必要提供几个页面,一个页面是iframe所在页面(页面名称:iPage.html),另八个页面是iframe属性src指向页面(页面名称:srcPage.html卡塔 尔(英语:State of Qatar)。

上述代码iframe的body中从不写入任何html标志。常常情况下输出ifr.contentWindow.document.body.innerHTML应该是空字符串。但Firefox中只怕至极。 请按上边步骤依次操作。 Firefox中展开该html暗中认可输出了空字符串 调控台中施行changeDesignMode方法,再实践prif方法,当时输出的innerHTML为“
”,如下Chrome/Safari/Opera输出的仍然是空字符串。

JS跨域访谈操作iframe,innerHTML为br_javascript技能_脚本之家。 

iPage.html,<body>里dom:

以上代码iframe的body中未有写入任何html标志。平常状态下输出ifr.contentWindow.document.body.innerHTML应该是空字符串。但Firefox中微微特殊。

<iframe id=“iId“ name=“iName“ src=“srcPage.html“ scrolling=“no“ frameborder=“0“></iframe>
srcPage.html,<body>里dom:

请按上面步骤依次操作。

<h1>小姨子的一天</h1>
<p>中午吃早点,中午约会吃饭,清晨K歌,深夜和四弟瞎折腾</p>
上边研究ie下JS是怎么操作以上七个页面,再商量firefox的做法,最终交给包容ie,firefox浏览器操作iframe对象的方法。

 

风度翩翩、ie下访问操作iframe里内容  

1,Firefox中开拓该html暗许输出了空字符串

世家都晓得iframe是非规范html标签,它是由ie浏览器推出的多构造标签, 随后Mozilla也援救了那一个标签。(聊天,嘿嘿)

图片 1

1. ie通过document.frames["IframeName"]获取它,例子:我们在iPage.html里输出srcPage.html里h1的内容,JS如下:

 

alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
您会开掘这么在页面里步向代码,好像并从未出口想要的东东,为啥吧?这么些自身也未尝搞精通,只是习惯性的插足了window.onload就有出口了(注:JS代码都写到那些事件里去卡塔尔,知道的人选能还是不可能告诉自身下。why?修改之后代码ie下有了出口,firefox下document.frames未有概念错误提醒:

2,调节新竹推行changeDesignMode方法,再实践prif方法,这时候输出的innerHTML为“<br>”,如下

window.onload = (function () {
  alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});

图片 2

  1. ie另生龙活虎种艺术contentWindow获取它,代码:

 

window.onload = (function () {
 var iObj = document.getElementById(‘iId‘).contentWindow;
 alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
此措施通过ie6,ie7,firefox2.0,firefox3.0测验都通过,好事啊!嘿嘿。(网络风流浪漫查,发掘Mozilla Firefox iframe.contentWindow.focus缓冲区溢出疏漏,有脚本注入攻击的摇摇欲堕。

 

新生据他们说能够在后台制止那样的作业产生,算是松了口气。可是如故愿意firefox新本子可以化解那样的危险。卡塔 尔(英语:State of Qatar)

Chrome/Safari/Opera输出的依然是空字符串。

3.变动srcPage.html里h1标题内容,代码:

iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘笔者想产生她一天的黄金时代有的‘;
通过contentWindow后拜谒里面包车型客车节点就和原先相近了。

二、firefox下访谈操作iframe里内容
Mozilla帮助通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准,通过标准能够少写多少个document,代码:

var iObj = document.getElementById(‘iId‘).contentDocument;
alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘笔者想成为她一天的意气风发有些‘);
alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);
相配这两种浏览器的不二等秘书诀,今后也出来了,便是运用contentWindow那么些措施。

哈哈哈!操作iframe是还是不是能够狂妄了呢?若是还以为优伤,你以致能够重写iframe里的故事情节。

三、重写iframe里的剧情
通过designMode(设置文书档案为可编写制定设计方式卡塔 尔(阿拉伯语:قطر‎和content艾德itable(设置剧情为可编制卡塔 尔(英语:State of Qatar),你能够重写iframe里的剧情。代码:

var iObj = document.getElementById(‘iId‘).contentWindow;
iObj.document.designMode = ‘On‘;
iObj.document.contentEditable = true;
iObj.document.open();
iObj.document.writeln(‘<html><head>‘);
iObj.document.writeln(‘<style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);
iObj.document.writeln(‘</head><body></body></html>‘);
iObj.document.close();
那四个目的的材质可参照:

firebug测量试验以上代码质量

 

注释掉 iObj.document.designMode = ‘On’;

iObj.document.contentEditable = true;

 

成效未有变,时间作用是注释前的接近三倍。嘿嘿。那八个指标是参照网络一些人的写法,重写iframe里内容,其实并未要求用designMode和contentEditable,除非有别的的必要。

四、iframe自适应中度
有了上面包车型地铁原理要达成那个一定轻易,正是把iframe的height值设置成它其普通话档的height值就可以。代码:

window.onload = (function () {
var iObj = document.getElementById(‘iId‘);
iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;
});
今昔对JS操作iframe你已经有了全新的认知,有可能这天会因为那几个有何新的web技艺名词,嘿嘿,臭美下!

 

...

本文由pc28.am发布于pc28.am,转载请注明出处:JS跨域访谈操作iframe,innerHTML为br_javascript技能_脚

上一篇:隐身设置,动漫已丢 下一篇:没有了
猜你喜欢
热门排行
精彩图文