iframe打开页面

网页上除了可以嵌入视频和音频之外，还可以嵌入第三方网页，需要用到这个 iphone 元素，这个叫泪点框架元素，他可以把另一个界面页面嵌入到当前页面中。用法也很简单，直接写一个 iphone m， 需要给他一个 src 属性，比如我们就写一个 gbs 三 w 点宾利，宾利点 com。 这个 freeboder 是用来指定是不显示边框的，零表示不显示，一表示显示默认就是一，不过边框是属于样式的范畴，所以这个属性我们一般都会把它指定成零，不显示边框。然后通过 cs 来设置样式。来看一下他们三个都是水平排列的，说明都是行和。可以来看一下他们的 display， 他是韩豪对吧？ outdoor 也是， iphone 也是，但他们都可以设置尺寸，这是可替换演说的特点。 vdo 我们改过了，再来改下。 outdoor 可以看到浏览情报的样式，这里给他设了一个宽高三百乘五十四，那我们来改下 它的宽度，五百像素变长了，对吧？再来个 head 三百像素高度也变了。当然 iphone 也可以改尺寸，我们来代码，你改宽度百分之百，高度一千像素。这样我们就把 p 三迁到了我们的页面里面。 样式这里可以看到他这里写了个 attribute style 属性样式，也就是我们设置的这个 freerenboder， 他提供的样式设置了四个方向的边框，宽度为零，然后我们把他这个属性改成一， 刚刚的属性样式就没有了，只剩下浏览节目的样式，这里把 boder face 改成了两个像素。这个 iphone 展开之后，里面是一个完整的必战网页。 ok， 前面我们再来写两个元素，这个就还是 b 站吧。再来一个高德地图 in map 点 com 保存。默认情况下，当我们点击 b 站的时候，他会在当前标间页打开，对吧？如果希望他在新标间页 打开，就需要给他们加一个 target blank， 来看一下，没问题吧？但如果我的需求是在这个 iphone 里面打开呢？很简单，给这个 iphone 加个 name， 比如我们就叫 window， 然后这两个 target 改成 window， 这样就可以了。来看一下，当我点击高德地图，高德地图的页面就会在这里打开， 然后点击 b 站，也在这里面打开了。这个 iphone 元素我们通常用来迁到别人网站的视频，比如 b 站我随便点开一个视频， b 站的视频是不能直接下载的，我们拿不到他的视频文件地址，但他允许我们使用 iphone 元素把他的网页迁逃过来。可以点一下这个分享， 这里就有一个嵌入代码，点下它代码就复制好了，把它粘贴到我们的网页，看到了吗？这就是一个 iphone 元素，但是它这里没有带写意名， h d b s， 如果 s i c 录进没有写写意名，浏览器会默认用当前网页的协议。如果当前页面用带 h d p， 它就会用 h d p 写意访问这个地址，所以如果 写一名一样，他是可以省略的。如果没有学过网络编程的话，可能不太理解什么是协议，简单说，协议就是规定了数据用什么格式传输，比如我们的协议是隔一个空格写一个单词，那么你读的时候也是给一个空格读一个单词，我们共同遵守这个协议，你就可以理解我发的内容，我也可以理解你发的内容， 这就是协议的作用。或者你也可以理解为协议就是语言，我们都说汉语就可以正常沟通，如果我说汉语，你说英语，那就没法沟通。浏览器用 atb 协议请求，网站服务器用 atb 协议响应，他们就可以正常通信，不然肯定就无法通信，拿不到网站的数据。 b 站用的是 atps， 我们这里用的不是 atps， 所以不能省略，要加上 etps。 当然你会发现其实不加写移民也可以访问，这涉及到重定向相关知识，不是我们这里讨论的重点。然后他这里还有一些属性，都是一些样式上的东西，不用管他们都可以用 cs 来控制的。 打开来看一下视频就迁入进来了，有点小，对吧？可以改下尺寸，宽度一千像素，高度五百像素。 okay fm 我们就讲这么多。

框架的标签是 fm， 所有的浏览器都支持 fm 标签。框架有一些属性，边框属性， fm border 高度， high 宽度， weight name 名称， c o， n 滚动条，滚动条呢有几个属性值？ us， do o t ssc 框架中嵌套的页面地址，我们通过一个小例子来了解一下框架的具体使用，打开 notepad 加加， 今天我们要做一个什么样的小例子呢？我们知道现在很多的管理系统都采用了框架作为布局， 其中最常用的就是左右式布局，今天呢我们就做一个左右式的一个框架布局。首先呢我们要新建一个主页面， 我们给它起名为 may html， 然后我们再新建一个页面，这个页面呢是左侧页面， 我们起名为 wes html。 下面我们再新建一个页面， 这个页面呢是右侧页面。 那右侧页面呢？因为有好多个，所以呢我这里 light 提示 t a n l 就是作为默认的打开的一个页面。 我们预览一下主页，主页面显示没有问题，但是我们考虑一下怎么着把我们刚才建的这个左侧页面和右侧页面嵌套到我这个主页面里面呢？ 我们需要使用 ic h a 里面呢有一个 s s c 属性可以链接到我们的页面， 这里呢我首先嵌套一个左侧页面，然后再嵌套一个右侧页面。 好，我们再预览一下左侧页面，右侧页面出来了，没有问题， 下面呢我想让这两个框架呢放到主页面这个文字下面，怎么实现呢？很好办，换行就可以了， 刷新好的左侧页面，右侧页面，那现在呢，我想把右侧页面宽度加大一些，怎么设置呢？我们可以使用它的 vd 属性， v d 属性呢，可以使用具体的像素值，比如说五百 p x， 也可以使用百分比，比如说百分之七十五 vs 呢，也可以使用百分比， 百分之二十。 好，那我现在呢想把这两个框架的高度呢再加大一些，怎么办呢？我也可以使用 high 属性。 好，现在宽度和高度都有了。那接下来我要做的事情呢，就是左侧放一些菜单， 可以点击的菜单， 菜单呢是一个列表，我呢要需要使用 u l 标签， 这里呢，我暂时设置三个菜单，第一个菜单是员工管理， 第二个菜单是客户管理，第三个菜单是订单管理。好，预览一下看效果。 三的菜单已经出来了，但是呢，现在这三的菜单还不能点击，如果想让他可以点击的话，我们需要使用 a 标签，也就是给他加一个超链接。 好，到目前为止呢，这三个菜单已经可以点击了，我们鼠标放上去的时候，他已经呈现了一个小手状，但是点击的话没有任何的动作产生，因为我还没有给 a 标签的 left 设置任何的值。 所以呢，我们得需要做三个页面，点击员工管理的时候，跳转到员工管理的页面，点击客户和 订单的时候，跳转到客户和订单的页面，继续新建三个页面， 员工管理我给他起名 m h t a v o。 客户管理界面，我给他起名 acony html， 订单管理，我给他 起名 order html。 好，三个页面创建完毕， 下面我需要把这个链接对应过去， 再预览一下我们的网页，点击左侧的员工管理， 跳转了，确实跳转了，但是呢不是我们想要的跳转效果，我们想要的效果呢，是点击左侧的页面的时候呢，在右侧这个框框里面出现相应的页面内容， 那这个时候怎么办呢？不要着急，我们看 f m 呢，它有一个属性，内幕属性好，这个时候就是内 属性登场的时候，我们给 light html 设置一个 name， 之后呢，我们在 a 标签里面设置一个 target tar god， 就是要跳转到的目标，这里呢写上我们刚才设置的 name， it 好了，再点击一次试试。员工管理，右侧成功的跳转到 了员工管理页面，客户管理，订单管理好，没有问题。我们看目前这个框架呢，有一个啊，很粗的一个边框，假如说我们想把这个边框取消，怎么办呢？我们可以设置它的 fameboder 出现， 把 fame buddha 的值设置为零。刚才我设置的是右边这个框架，刷新看边框消失了， 假如说我设置为一好，边框又出现了， 有些时候我们网页的内容呢会比较多，那一频可能显示不全，这时候怎么办呢？ 我们可以给这个框架呢，加一个滚动条，加一个 school 等于 us， 也就是说让右侧这个框架显示滚动条，你刷新一下看效果，不管内容有多少，它都能完整的形式。如果说我们不想让滚动条出现的话，我们可以把 vs 改成 no。 有些时候呢，我们可能想让框架的滚动条更加智能一些啊，比如说文字内容多的时候就显示，文字内容少的时候就不显示，那这个时候我们需要给 slow well 设置一个 o 透值。

今天我们继续讲解动态家长 iphone， 解决 iphone 的高度设置问题。今天讲的方法是一种智能的方法，这种方法呢，它的坑比较多，所以我们已经把它做成了一个函数。 使用这种方法，必须首先学习建立网站的方法，也就是要把我们的这一些代码部署成一个网站， 不俗称网站的方法。 iis 建站的方法我们已经教给大家了。现在我们就到我们这个网站里面去指向我们的视力程序， 然后通过浏览器去访问我们的网站， 转向后台管理业，使用域名的方式去访问，才能应用这一个方法。接下来我们到俱乐部的 uphone 框架里面去找一个翼步加载类。 第七个动态设置 iphone 的宽高。把这一部分代码复制下来，其中很多是注释，代码很短。把它复制下来后，粘贴到自己的 js 区域， 代码不长，大概就七八行代码，他能够动态算出 friend 里面的大小。不用再去每一个页面里面，向上一节课所讲的去设置一个 post message 的方法。下面 我们直接掉这个函数，在这个位置掉这个 iphone， 把这个 iphone 作为参数传递给这一个函数。这个函数可以动态设置 iphone 的高度。 接下来把它复制一份，粘贴到下面，在每一个昂克力克世界都粘贴一份。 最后在函数的末尾第一次加载的时候也粘贴一份，保存它。下面我们来测试一下这一种方法。我们刷新页面，单击购物车页面没有生效。 其原因和上一节课的一次是因为我们设置了右边区 的高度，我们把高度删除，再来刷新页面，你就会发现所有的页面他可以自适应高度了。 我们点首页有高度，购物车页面有高度，发布页面有高度。 再切换肺较短的页面也有高度。所以这一种方案只需要调这一个函数即可。使用动态加载 iphone 的方案，设置 iphone 的高度，可以一劳永逸的解决 iphone 的高度设置问题。 在拷贝的代码里面，代码很短，但其中的注视很多，每一个都描述了你可能会遇到的问题。像这些 代码的位置都是不能变动的，其调用的位置也是不能变动的。好了，这节课就讲到这里，大家下课休息， 下面我们来测试一下这一种方法。我们刷新页面，单击购物车页面没有生效， 其原因应该是有缓存，一旦部署成了网站的形式，他就有很多缓存。

哈喽，今天我要教大家怎么样从地方第三方拿到嵌入代码之后呢，还可以把它放到配具片的网站上面，还可以自动适应不同的屏幕，那我们就开始吧， 我以我们官方网站为例，我们这里有一个教程， 我们看一下效果，看下这里，你看一下这个就是西瓜视频的欠用代码，然后我又做到了，这里是可以自动适应的， 看下效果，看可以是在不同的屏幕上面，他都可以自动。 接下来我们看一下是怎么去做的， 之前呢我是用外联的方式去把它跳转到西瓜视频的，然后点击，但是我现在呢就需要放到我自己的站内， 那我们我就进入我的官方的后台，然后就打开这个 教程列表，点击这个列表，然后打开数据源， 你们看一下这个， 这个是通过外练的方式去跳到西瓜视频的， 然后上面这个呢我已经做好了，就是嵌入的是第三方的视频，然后我现在要把这个 也放到我们的站内，然后就可以用视频的方式展示，那我就打开 这里是一个视频，这里有一个分享，其实很多，呃， 其实很多视频平台他都有这个分享的，他都有一个嵌入的代码，我们就可以复制，基本上都是一样的，然后点击这个嵌入代码， 然后一键复制，再回到后台，后台这里后台这里有一个详细，那我们就在这里视频， 然后内线把这个代码放进去，确定这样就可以加进来了，我就要把这个外联删掉，不然他还会跳过去的，如果你填了这个外联，他是优先跳过去的， 再刷新，然后点击 好，这时候视频就加进来了，但是你看到了他是一个固定宽度还有固定高度的一个 视频，这样子呢，就没办法适应我们的小的屏幕，让我们看一下他的效果， 我现在用在不停的尺寸，你看一下他就是这样子的，是不是他会影响到小屏幕，这下面都出问题了， 这个是非常不友好的。然后我需要改一下， 我就看一下上一个是怎么改的。那我们点击原代码， 其实最不同的就是在这里加入了一个样式，就是视频的容器， 我们复制这里的代码，然后放到这边，这里没有加，我们加进去， ok， 确定了之后保存， 再去刷新一下，哎，就可以了， 然后效果也是一样的，可以适应屏幕，这就非常好了。 因为之前我啊比较偷懒，所以就把这个视频直接就跳到啊这个西瓜视频这里去，但是我后来发现我有些视频我需要在站内里， 就是可能视频下方我要写一些文字，还有贴一些图片，那为什么加了那个样式，他就 等实现了，那这段样式他是放在哪里呢？其实我们是放在那个详情页的组建的，呃，那里的，就好像现在我们访问的这个是详情页，那么后台 就有一个相应的教程，详情页 在这里， 点击这个文章组件，你看一下这里有个内部样式，这个内部样式就是我们的。呃，详情页，然后呢加入了这段样式， 就是这一段代码，这段代码呢我就会放在啊我那个我这个视频的下面，那你们可以直接复制去使用 这个代码也是我啊，遇到这个问题的时候，我就从网上找了一下啊，就找到了这个代码，这个是十六比九的一个视频的一个尺寸， 如果，如果你这张代码他只针对这个组件有效的，如果你想 整个网站，如果你想整个网站都有效呢？那就把这个代码可以放到这里的自定义代码这里，这里有个全局样式， 你可以把它放在这里，放到这里，这样子呢，他就可以整个网站都会加载到这个代码。如果你放的视频，我做的是可能是视频的网站到处都要用到，那这样子放了就会比较好 啊。我这里呢就没有必要，因为其他页面是用不到的，只有那个主见才用到，所以我只需要加到那个主见就可以了， 在我这里是不加的。 ok， 今天就教到这里。其实啊，这款代码也是非常简单，加入进去就可以用到 第三方的。呃，这个内向代码还可以自动适应，所以就非常的不错。好了，拜拜。

这节课我们来讲解，当单击我的京东的时候，要跳转到首页。当单击我的订单的时候，要跳转到订单管理页面，以后还会有购物车显示在前面，一单击就要到购物车页面， 甚至包括出售的商品页面，个人信息页面。我们希望可以通过其他页面带一个参数，直接跳到对应的页面，而不是始终跳转到首页。 要完成这一个功能，我们就需要在菜单下或者其他要跳转的地方加一个参数。如果大家还记得首页像第二 个页面如何传递参数的知识点，那这节课就非常简单。因为原理一模一样， 所以我直接到代码里面去添加这一些跳转到指定页面并传递参数的方法。下面我到公用的 gs 里面找到我的订单，在这个位置 前面给他加一个变量，就叫订单等于他接下来对这个变量做 on click 实践。 当单击他的时候要做什么？单击他的时候，跳转到用户管理，并传递 函数 order manage， 这个 order manage 是订单这一个网页订单这一个网页的名称。 接下来我来编码 window， 点 open， 打开 user friend， 点 h t m， 并且传递参数配 g 等于 order magnet g， 打开这个网页，传递页面等于订单管理。 相同的道理，我把它加到我的京东这一个位置，在这里再定一个变量叫 my g d， 等于它把这个变量替 换掉这个边梁转向 bike home， 点 h t m， 所以这里叫 bike home。 单击保存， 我们暂时只做这两个的事例。至于购物车以及其他的个人信息等以后我们制作相应的功能时，再去添加这一些代码，这是啊菜单部分， 接下来我们要去 user friend 这个页面接收这一个参数，跳转不同的页面，我们转向 user friend 这一个页面， 在 window 点 onload 里面的后面部分，我们来添加一个功能，根据上一个页面的传差 跳转不同的值页面。如果按照以前的做法，我们是得到地址栏的信息，按照等号进行拆分， 所以不会的同学可以去参见以前的产品列表页面的做法，把这一串字符串按照等号进行拆分， 得到后面的支付串，再根据这个支付串跳转不同的页面。今天我来介绍一种新的方法， 这种新的方法呢是在 ufo 框架里面的通用切口类里面的获取 url 传仓，用这个函数 可以获取任何键的值，相对于这一串王字来说，只要把配己这一个支付串填到这一个函数的参数里面，他就能够得到后面的值， 不管你这后面有多长，按照通用的写法，我们还会在雨后面再带很多参数， 这是在后期我们制作项目的时候需要这样去做，不管你有多长，我只要填配己就能得到这一个词，填 number 就能得到这一个词。 这是啊这一个函数的作用，如果精益求精的同学 可以自己去实现这一个功能，用字符创拆分比较的方法去实现这一个功能。 下面我们直接先使用这一个函数，等大家学会了想要学习的更加深入，要自己制作一套自己的架构的时候，我们再来详细的讲解怎么制服穿拆分来做出这一个功能。 下面我们先来使用它切换到 user free， 把这一串拷贝一份， 在这里定一个变量，叫做配积累，就等于它来获取配积，这个配积和 command gs 里面 这个佩奇是一一对应的，根据佩奇就能找到后面的字，找到后面的字找到后，我们剩下的工作就是给 iphone 一个指向， 通过这个函数我们可以得到页面的值。接下来我们就来做判断，如果得到的是购物车，就打开购物车页面。 如果得到的产品管理，打开产品管理页面。如果得到的订单管理，打开订单管理页面，如果得到了首页，打开首页， 大家会发现这一个判断非常多，所以我们这里给大家介绍 一个知识，多个判断，用 switch case 语句， switch k 字语句处理多个判断是它的长处。下面我们就来写 switch 的语法 是 reach 配机任，也就是用户的传餐，加两个括号 case。 第一种情况，如果它是 barcode， 也就是首页敲冒号，那我们就访问首页， 然后跳出，再来第二个，我直接复制。如果是订单管理 order manage， 那我就跳订单管理页面。如果是购物车小品 cut， 那我就跳小品 cut 页面。 如果是产品管理 product manage， 那我就跳产品管理页面。 break 必须带，不带的话会重复的复制。 最后如果这些条件都不满足，我们就到缺省的页面，缺省的页面我们让他访问首页， 这就是 switch case 的用法。接下来我们再加一个属性，把 iphone 的高度 设置为零，下面我去刷新界面，单击我的订单，跳到了我的订单，单击我的京东，跳到了首页，满足我们的需求。 但是我们把所有的代码都堆在 window 点 unload， 这是不好的，所以我们希望把这一些代码独立成一个函数， 我们就来独立一个函数，这个函数就叫切换页面、欠记、 pages 等方形， 加上注视，根据传餐转向不同的页面，把这些 代码剪切掉，复制到这里，然后再复制这一份放在这里 保存。我在刷新这个页面，现在我又去首页跳我的订单，不对， iphone is not d， 那就是这个没有传过来，所以我们要把它作为参数传过来。 i free 最简单的就是直接对串 i free， 但这样不符合规范，我们不要这个下划线，然后在这里再定一个变量， 等于 iphone， 加上注视，保存，刷新页面 到这边来，单击我的订单，跳到了我的订单，单击我的京东，跳到了首页。这一个根据传餐转向不同的页面的函数，我们就做好了，以后要转页面，我们就到这一个地方来转向不同的页面就可以了。 我们希望 window 点 onlood 代码越扫越好，这些我们已经独立成了函数，这些已经独立成了函数， 这一些我们也是要独立成函数的，下面我们就来把这一些独立成函数。 这些代码的作用是给左边菜单赋予单机事件， 那就是 left， menu， click， 对你放个心，把这些代码通通的复制一份放到这里面。 由于这个函数要用到 i free， 所以这些都可以上，唯独要留下这个 i free 的获取。如果是这样的话，这一句我们也不写在这里，我们把这一句直接卡掉，这个参数也不用传， 直接在这个地方得到它，这个参数也删掉，这样更加清晰明了。那这里我就直接调这个函数， 这样我们 window 点 onlog 就只有四个函数，分别处理不同的事情。下面我刷新页面， 去这一边单击我的订单，跳到了我的订单，单击我的京东，跳到了我的京东。在这一边单击菜单下都能够实现以前的功能， 但是我们已经把它做成了全函数式的模式，使逻辑更加的清晰。这节课的内容有一点杂，主要还是规范所有的编码。 谢谢大家的观看，大家下课休息。

在上一节课，我们完成了我的信息页面的资助，但是我们会发现这个菜单还没有像前面的这些菜单一样使用 gs 统一去实现。 这节课我们就修改这一个菜单部分，让他也像前面的这一些页面一样使用 gs 去实现。所以到我们的代码区域，按照以前的方法给他添加一个 id， 然后把中间的内容全部删除，在拷贝 gs 里面生成菜单的函数，把它粘贴到 windowso 的的 第一行保存刷新这一个页面，刷新后发现不正常，我们 f 十二进去调试看，发现他不认识这一个函数，说明我们的 gs 没有引进来， 所以我们去引用工友的结实文件，粘贴到 这个位置，再保存，再刷新好了，有了内容的现在这个也是可以使用七 s 来展示了， 但是发现他还没有实现自动登录的功能，所以接下来我们再去把 indix 里面的获取本地信息的这一个函数粘贴到这下面，单击保存，再刷新页面，你会发现他可以自动登录了。 接下来我们希望这个夜头能够全屏展示。在我们制作这个 user free 点 html 的时候，我们给他添加了一个菜单的最大的父亲， 所以我们去定义一下这一个 mailul l 的样式，把它放在这个位置，加上注视全屏画菜单，添加样式宽度百分百，背景颜色 红色 overflow item， 再刷新这一个页面，会发现他的菜单区全屏化了。接下来我们再来调整这一个菜单，让他的上部分跟这一个平齐， 所以我们又要去修改菜单的 css 文件，把 martin top 十个像素把它去掉，保存在刷新页面， 你会发现这个菜单就上去了，这一种模式和京东网站应该是一致的，现在我们所有的页面菜单都是统一的，只是这一个后台管理的菜单上 稍微的要长一点，这样我们就实现了所有的菜单的统一。接下来我们就制作这一个右边区域的内容 好了，谢谢大家的观看。