采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。
由于客户端js使用浏览器的同源安全策略，跨域情况下，被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况，提示错误：Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外，同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一个web服务的javascript代码通常只有在它也驻留在Web服务本身所在的同一个服务器的时候才有用。
所以在跨域情况下，我们遇到的问题就是：父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介，来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。
思路：现有主界面main在域a下，被嵌套页面B在域b下，被嵌套页面B又嵌套一个在域a下的中介页面A。当用户打开浏览器访问mailhtml的时候载入B，触发B的onload事件获取其自身高度，然后B载入A,并将高度值作为参数赋值给A的location对象。这样A就可以通过locationhash获得B的高度。（location是javascript里边管理地址栏的内置对象，比如locationhref就管理页面的url，用locationhref=url就可以直接将页面重定向url。而locationhash则可以用来获取或设置页面的标签值。比如>
关键代码：
iframe主页面：mainhtml
<iframe id="iframeB" name="iframeB" src=">
iframe嵌套页面：Bhtml
<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
hashH = documentdocumentElementscrollHeight; //获取自身高度
urlC = ">
中介页面：Ahtml
<script>
function pseth() {
var iObj = parentparentdocumentgetElementByIdx_x_x_x('iframeB');//A和main同域，所以可以访问节点
iObjH = parentparentframes["iframeB"]frames["iframeA"]locationhash;//访问自己的location对象获取hash值
iObjstyleheight = iObjHsplit("#")[1]+"px";// *** 作dom
}
pseth();
</script>
同域情况下就不用多说了，直接在被嵌套的页面B中获取其自身高度并 *** 作其父窗口main的dom属性即可。
下面构建一个简单的 todo list 来展现多页
后台
后台只需要设计好以下数据接口，让前端可以访问
Get： >
说到hash和history的区别，最直观的就是在url中， hash带了#，history没有# ，它们两个是路由配置mode的两个选项。
前端路由的核心是在 改变视图的同时不会向后端发出请求 ，浏览器提供的这两种支持就是为了达到这一目的。
1hash------就是指url中#号以及后面的字符
①hash也称作锚点，其中的#和css里面的#是一个意义，它本身是用来做页面定位的，可以是对应的id元素显示在可视区域内。
②我们可以通过 windowlocationhash 获取hash值
③hash中有一个 hashchange 事件，当hash值发生变化时会触发这个事件，语法是： windowonhashchange=person 或者 <body onhashchange='person'> ,这个事件 会覆盖 现有的事件处理程序，如果在想要添加一个新的事件处理程序的前提下，还不会覆盖原有的事件处理程序，可以通过' addEventListener '
另外hashchange事件有两个属性：
④地址栏url中的#符号，比如：>
hash 路由：监听 url 中 hash 的变化，然后渲染不同的内容，这种路由不向服务器发送请求，不需要服务端的支持；
history 路由：监听 url 中的路径变化，需要客户端和服务端共同的支持；
我们一步步实现这两种路由，来深入理解下底层的实现原理。我们主要实现以下几个简单的功能：
1监听路由的变化，当路由发生变化时，可以作出动作；
2可以前进或者后退；
3可以配置路由；
当页面中的 hash 发生变化时，会触发hashchange事件，因此我们可以监听这个事件，来判断路由是否发生了变化。
事件hashchange只会在 hash 发生变化时才能触发，而第一次进入到页面时并不会触发这个事件，因此我们还需要监听load事件。
在 history 路由中，我们一定会使用windowhistory中的方法，常见的 *** 作有：
back()：后退到上一个路由；
forward()：前进到下一个路由，如果有的话；
go(number)：进入到任意一个路由，正数为前进，负数为后退；
pushState(obj, title, url)：前进到指定的 URL，不刷新页面；
replaceState(obj, title, url)：用 url 替换当前的路由，不刷新页面；
调用这几种方式时，都会只是修改了当前页面的 URL，页面的内容没有任何的变化。但前 3 个方法只是路由历史记录的前进或者后退，无法跳转到指定的 URL；而pushState和replaceState可以跳转到指定的 URL。如果有面试官问起这个问题“如何仅修改页面的 URL，而不发送请求”，那么答案就是这 5 种方法。
如果服务端没有新更新的 url 时，一刷新浏览器就会报错，因为刷新浏览器后，是真实地向服务器发送了一个 >
以上就是关于如何在HTML的iframe中，获取被调用的页面的高度，并作为这个iframe的高度全部的内容，包括:如何在HTML的iframe中，获取被调用的页面的高度，并作为这个iframe的高度、1.单页面应用程序、vue-router中history和hash两种模式的区别的区别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）