前端技术之Iframe1

港控/mmm° 2022-06-09 07:27 191阅读 0赞

昨天码了一篇，结果一不小心手贱给关了，没保存，所以今天又补了一篇，下面进入正题。

现在的项目是给中国移动做的一个webapp，主要是加载第三方资源，暂时先用iframe，以后升级再补一篇。

1.加载第三方页面是position：fixed，滑动时会跳动的问题，就是在外面找到里面的元素进行动态赋值：

var win = document.getElementById('external-frame').contentWindow; win.οnscrοll=function(){ var top = win.document.body.scrollTop; console.log(top) $(window.frames["myiframe"].document).find(".aaa").css({ top: 300 }) }

2.我查了下，window.history.pushState(url,null,url)方法，url必须同源，才能在window.onpopstate事件中检测到。但是现在有想要监听iframe不断加载后，浏览器的后退事件，怎么办呢？这里取个巧：

现在是上边7个tab，点击都会使下面静态的iframe标签的src属性发生变化，浏览器也会记录，但是返回时tab的选中状态是不变的，这是一个bug，代码如下；

点击时传入tab的index，即n

var state = { url:n }
    	setTimeout(function(){
    		window.history.pushState(state, null, "#" + goUrl);
    },500)

点击后退按钮时，进行监听：

window.addEventListener("popstate", function(e) {
    		console.log("我监听到了浏览器的返回按钮事件啦");	
    		window.history.go(-1);
    		var currentUrl = history.state.url;
    	    $(".tabs li").eq(currentUrl).addClass("selected").siblings().removeClass("selected")	
    }, false);

ok，大部分工作完成了，但是还有个问题，当你只点击一次的时候是无法返回最开始首页的状态的，因为首页是刚刷新页面的时候加载的，并没有发生点击事件，它没有得到n值，它会报这个错

Uncaught TypeError: Cannot read property 'url' of null(…)

所以这样

这样就可以了

总之，iframe bug多多，大家尽量少用。前端的js框架其实就可以做跨域，像vue之类的。。。