【4858美高梅】js学习笔记,iframe不起功能

By admin in 4858美高梅 on 2019年4月8日

有三个须求要在iframe里彰显一个网址,但设置iframe的src后,iframe并从未起效果。然后打开控制台,发现错误如下:

iframe能够说是相比较老得话题了,而且网上也大半在说少用iframe,其原因大约为:堵塞页面加载、安全难题、包容性难题、搜索引擎抓取不到等等,可是相对于这一个弱点,iframe的帮助和益处更牛,跨域请求、制作富文本编辑器、历史记录管理、长连接、无刷新文件上传等方面,可参看一下搜狐的这几个答复:Iframe
有何好处,有何坏处?国内还有啥样有名网址仍用Iframe,为何?有哪些原来用的今后舍弃了?又是怎么?。

一、 windows XP

以免网页被外人的网址iframe,服务端怎样设置HTTP尾部中的X-Frame-Options新闻?,

 

一、现象:in a frame because it set ‘X-Frame-Options’ to ‘deny’.

 

二、服务配置

因为,有时候为了幸免网页被外人的网址iframe,大家得以因而在服务端设置HTTP尾部中的X-Frame-Options新闻。

X-Frame-Options 响应头有多少个可选的值:
DENY:页面无法被放置到其余iframe或frame中;
SAMEOPRADOIGIN:页面只可以被本站页面嵌入到iframe也许frame中;
ALLOW-FROM:页面允许frame或frame加载。

在服务端设置的诀窍如下:

【4858美高梅】js学习笔记,iframe不起功能。Java代码:
response.addHeader(“x-frame-options”,”SAMEORIGIN”);
Nginx配置:
add_header X-Frame-Options SAMEORIGIN
Apache配置:
Header always append X-Frame-Options SAMEORIGIN

一、现象: in a frame because it set ‘X-Frame-Options’ to ‘deny’.
二、服…

4858美高梅 1

后天就总括一下操作iframe的艺术,以及日常的部分选用。

1. MIME设置:
在IIS的站点品质的HTTP头设置里,选MIME
映射中式点心击”文件类型”-”新品类”,添加1个文件类型:
论及扩充名:*.json
内容类型(MIME):application/x-javascript

对其招来找到了答案:

4858美高梅 ,知识点集中

稍加工作经常不用太不难忘了,所以最佳在历次学别的文化的时候汇总一下其余连锁的学识,把那些知识融汇一下,可能有任何获取。

document;                 // 整个页面文档 
document.documentElement; // 页面的html容器
document.body;            // 页面的body
document.defaultView;     // 获取window对象,FF、chrome、ie9+

2. Script Map Handler设置:
还是在IIS的站点属性里,”主目录”-”应用程序设置”-”配置”-”映射”-”添加”,会打开”添加/编辑应用程序扩张名映射”的装置页面
扩展名:.json
运营文件:C:\WINDOWS\system32\inetsrv\asp.dll
动作:GET,POST

该网址设置了响应头frame-ancestors ‘self’,

一、获取iframe的内容

假使要拿走iframe中的内容,须求采取document.contentWindow属性,以及contentDocument属性

  • document.contentWindow
    获取子窗口的window对象,ie、ff、chrome都辅助,chrome要求在劳动器端才能选用
  • document.contentDocument
    获取子窗口的document对象,(ie6、柒不接济)ie八+、ff、chrome扶助,chrome要求在劳务器端测试

如下,测试:

新建文件:index.htmliframe1.html

//index.html
<button>变色</button>
<iframe src="./iframe1.html"></iframe>
<script>
window.onload = function(){
    var btn = document.getElementsByTagName("button")[0];
    var iframe = document.getElementById("iframe1");
    btn.onclick = function(){
        iwindow = iframe.contentWindow;
        idoc = iwindow.document;
        console.log("window",iwindow);//获取iframe的window对象
        console.log("document",idoc);  //获取iframe的document
        console.log("html",idoc.documentElement);//获取iframe的html
        console.log("head",idoc.head);  //获取head
        console.log("body",idoc.body);  //获取body
        idoc.body.style.color = "red";  //设置字体颜色
    }
}
</script>
//iframe1.html
<p>test test</p>

德姆o测试地点:点击这里

那样大家就获取到了iframe中的一些指标:

4858美高梅 2

三.保存,重启IIS,应该就能够访问了。假诺那多少个,就重启一下对讲机看看。

4858美高梅 3

2、通过iframe设置本页面内容

经过iframe获取其父容器的window属性,通过window.parentwindow.top

  • window.parent
    间接获得父成分的window,要是父成分照旧iframe,那正是该iframe的window对象
  • window.top 获取最顶层的器皿的window对象

除此以外,还有3个window.self属性

  • window.self 对对象自作者的引用,如下测试:

在index.html以及iframe.html中追加代码

//index.html
//iframe window
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var ibtn = idoc.getElementsByTagName("button")[0];
ibtn.onclick = function(){
    console.log("self--", iwindow.self);
    console.log("parent--", iwindow.parent);
    console.log("top--", iwindow.top);
    console.log(iwindow.top === iwindow.parent);
    console.log(iwindow.self === iwindow.top);
    window.parent.document.body.style.color = "red";
}
//iframe1.html
<button>改变</button>

德姆o测试地方,点击那里

4858美高梅 4

 

从而禁绝iframe嵌入本身的网站。

三、多个iframe

一经页面中嵌套的iframe很少甚至说并未iframe,此时,window.top、window.self、window.parent都以指向3个window。

如果页面中有多层次的iframe潜逃,那么window.parent、window.top的作用就相比较优秀了。

4858美高梅 5

二、 windows 7

更详尽的CSP知识参考。

四、iframe的onload事件

iframe也有onload事件,即加载完触发的轩然大波,可是,IE浏览器不止onload直接触及,必要使用ie事件操作处理程序。

window.onload = function(){
    var iframe = document.createElement("iframe");
    iframe.src = "./iframe1.html";
    document.body.appendChild(iframe);
    iframe.onload = function(){
        alert("iframe loaded");
    }
    //对于ie浏览器,需要使用attachEvent()
    iframe.attachEvent('onload', function(){
        alert("iframe loaded");
    })
}

1、如下图在左手采纳你要安装的网址在(图中1),在IIS中甄选MIME类型(图中二),双击进入。

5、网址防钓鱼处理措施(防被嵌套)

稍加不法人们使用iframe制作出一些好像官网的网址,当用户输入消息的时候,消息被不法家伙获取到,那些网址就叫做钓鱼网址,当然,用户正是那条鱼。那种制作方式大致,快捷,直接通过iframe引进几个网址即可,然后修饰一下面框之类,那样用户输入之后,通过js就能博取到用户的音讯了。

那么,怎样防患网址被钓鱼呢?方法也很粗大略,判断引进该框架的网址是否我们团结的网址:

新建文件:iframe二.html

//iframe2.html
if(window != window.top){
    window.top.location.href = "http://baidu.com";
}

Demo地址:点击这里

诸如此类经过判断iframe是否被嵌套即可,假若被嵌套,则iframe的window和window.top不一样等,此时让window.top实行跳转到真正的页面,就高达了防被嵌套的机能。

<iframe id=”iframe_0.4027374773986594″
src=””
frameborder=”0″ scrolling=”no” height=”541″ style=”margin: 0px; padding:
0px; border-width: initial; border-style: none; width:
1507px;”></iframe>

陆、动态设置iframe的可观

默许意况下,嵌套iframe之后,iframe不会活动撑开,而是出现滚动条,就像是这样,小编成立的是二个200*200的盒子:

4858美高梅 6

那正是说,该如何让ifram的万丈自适应吗,上边是部分进行:

首先步:去掉滚动条

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

第二步:通过contentWindow获取iframe的offsetwidth,设置给height:

var iframe = document.getElementById("iframe");
var idoc = iframe.documentWindow.document;
iframe.height = idoc.body.offsetHeight;

德姆o测试地方:点击那里

贰、进入后选取搞作中增加(下图中一),会弹出添加MIME类型对话框(下图中二),在文书扩充名中输入”.json”,在MIME类型中输入”text/json”(不要双引号).点击确认,再重启网址即可

参照链接

妙味课堂-录制难题解答-操作iframe
Iframe
有怎么着便宜,有怎么着坏处?国内还有啥样盛名网址仍用Iframe,为何?有何原来用的今后放弃了?又是为什么?

文章转自:绿岛之北

绿岛之北:

<iframe id=”iframe_0.13359296429706302″
src=””
frameborder=”0″ scrolling=”no” height=”540″ style=”margin: 0px; padding:
0px; border-width: initial; border-style: none; width:
1507px;”></iframe>

三.若以上步骤还无法读到JSON数据,则在IIS必要再添加“处理程序映射”,步骤如图

<iframe
id=”iframe_0.5906490174561301″
src=””
frameborder=”0″ scrolling=”no” height=”557″ style=”margin: 0px; padding:
0px; border-width: initial; border-style: none; width:
1507px;”></iframe>

<iframe
id=”iframe_0.5447486733793283″
src=””
frameborder=”0″ scrolling=”no” height=”635″ style=”margin: 0px; padding:
0px; border-width: initial; border-style: none; width:
1507px;”></iframe>
下一场再度网址即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有