跨域的页面中导航随滚动条的滚动发生变化
来源：互联网 发布：什么叫矩阵测光 编辑：程序博客网 时间：2024/05/18 00:24
描述：当页面中嵌套跨域的页面时，需要使滚动条滚到嵌套页面的菜单时，嵌套页面的菜单固定在顶部
方法一
a.html
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>Apache Tomcat Examples</title></head><style> html, body { width: 100%; margin: 0px; height: 100%; } .header { height: 80px; text-align: center; line-height: 80px; background: #000; color: #fff; } .banner { height: 200px; color: #fff; line-height: 200px; text-align: center; background: #5eacef; }</style><body> <div class="header">header</div> <div class="banner" id="banner">banner</div> <iframe src="http://10.4.3.197:8008/b.html" name="myframe" width="99%" frameborder="no" scrolling="no" height="100%" id="iframepage"></iframe></body><script src="jquery-1.8.3.min.js"></script><script> window.addEventListener('message', function (e) { document.getElementById("iframepage").style.height = $.parseJSON(e.data).scrollHeight; }, false); window.onscroll = function(e) { var t = document.documentElement.scrollTop || document.body.scrollTop; var banner = document.getElementById('banner'); var obj = document.getElementById("iframepage").contentWindow; obj.postMessage(JSON.stringify({ "t": t }), '*'); if (typeof (exec_obj) == 'undefined') { exec_obj = document.createElement('iframe'); exec_obj.name = 'tmp_frame'; exec_obj.src = 'http://10.4.3.197:8008/execB.html'; exec_obj.style.display = 'none'; document.body.appendChild(exec_obj); } else { exec_obj.src = 'http://10.4.3.197:8008/execB.html?' + Math.random(); } }</script></html>b.html
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>Apache Tomcat Examples</title></head><style> html, body { margin: 0px; width: 100%; } .tab-title ul { vertical-align: middle; font-size: 0; -webkit-transition: width ease .8s; transition: width ease .8s; } .tab-title ul li { display: inline-block; text-align: center; font-size: 14px; box-sizing: border-box; max-width: 140px; min-width: 12.5%; } .tab-title ul li.current a { display: block; border-bottom: 3px solid #2277da; color: #2277da; background: #fff; } .tab-title ul li a { font-size: 14px; color: #333; padding: 0 10px; height: 59px; line-height: 59px; display: inline-block; } .tab-content { margin: 40px 0 60px; position: relative; } .fixed-title { position: fixed; z-index: 100; box-shadow: rgba(0, 0, 0, .22) 0 5px 10px -5px; border-bottom: 0; width: 100%; }</style><body onload="load();"> <div class="tab-title" id="tab_title"> <ul> <li class="current"><a href="#userGuide">新手指引</a></li> <li class=""><a href="#userImg">客户案例</a></li> <li class=""><a href="#userDefined9">产品优势</a></li> <li class=""><a href="#featuresV2">产品功能</a></li> </ul> </div> <h3 id="userGuide" class="tab-content-title">新手指引</h3> <div class="tab-content-detail qc-wrapper"> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> </div> <h3 id="userImg" class="tab-content-title">客户案例</h3> <div class="tab-content-detail qc-wrapper"> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> </div> <h3 id="userDefined9" class="tab-content-title">产品优势</h3> <div class="tab-content-detail qc-wrapper"> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> </div></body><script src="jquery-1.8.3.min.js"></script><script> var t; window.addEventListener('message', function (e) { t = $.parseJSON(e.data).t; }, false); function load() { // parent.document.getElementById("iframepage").style.height = document.body.scrollHeight + "px"; top.postMessage(JSON.stringify({ "scrollHeight": document.body.scrollHeight + "px" }), '*'); } function changeTitle() { var iframeTitle = document.getElementById("tab_title"); if (t >= 280) { !hasClass(iframeTitle, 'fixed-title') && addClass(iframeTitle, 'fixed-title'); iframeTitle.style.top = (t - 280) + 'px'; // var topValue = t - 280 + 'px' // $(iframeTitle).animate({'top': topValue }, 30); } else { hasClass(iframeTitle, 'fixed-title') && removeClass(iframeTitle, 'fixed-title'); } } function hasClass(ele, cls) { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(ele, cls) { if (!this.hasClass(ele, cls)) ele.className += " " + cls; } function removeClass(ele, cls) { if (hasClass(ele, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); ele.className = ele.className.replace(reg, ' '); } }</script></html>execB.html
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>Apache Tomcat Examples</title></head><body> <script type="text/javascript"> parent.window.myframe.changeTitle();</script>></body>方法二
aa.html
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>Apache Tomcat Examples</title></head><style> html, body { width: 100%; margin: 0px; height: 100%; } .header { height: 80px; text-align: center; line-height: 80px; background: #000; color: #fff; } .banner { height: 200px; color: #fff; line-height: 200px; text-align: center; background: #5eacef; } .hide { display: none; }</style><body> <div class="header">header</div> <div class="banner" id="banner">banner</div> <div id="titleId" class="hide"></div> <iframe src="http://10.4.3.197:8008/bbb.html" name="myframe" width="99%" frameborder="no" scrolling="no" height="100%" id="iframepage"></iframe></body><script src="jquery-1.8.3.min.js"></script><script>// $(function () { // $(function () { /*** 绑定事件监听函数* ele 绑定事件元素* event 绑定事件* func 绑定事件的方法*/function myAddEventListener(ele, event, func) { try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 ele.addEventListener(event,func,false); } catch(e){ try{ // IE8.0及其以下版本 ele.attachEvent('on' + event,func); } catch(e){ // 早期浏览器 ele['on' + event] = func; } } } var moduleTop = []; myAddEventListener(window, "message", function(res) { try { var data = JSON.parse(res.data); if(data.moduleTop) { moduleTop = []; for (var key in data.moduleTop) { moduleTop.push([key, data.moduleTop[key]]); } } if(data.height) { $("#iframepage").css({"height": data.height + "px"}); } if (data.scrollTop) { $('html').animate({ scrollTop: data.scrollTop }, 2000); } if(data.tabDom) { $('#titleId').append(data.tabDom); $('#titleId').css({ "position": "fixed", "top": "0", "z-index": "100", "box-shadow": "rgba(0, 0, 0, .22) 0 5px 10px -5px", "border-bottom": "0", "width": "100%", "background-color": '#fff' }).on('click', 'a', function() { // 停止当前正在运行的动画 $(selector).stop(stopAll,goToEnd) $('html, body').stop(true, true); // 获取自定义属性 // var clickHref = $(this).data("href"); // 获取标签自带属性 // var clickHref = $(this).prop("href"); var clickHref = $(this).attr("data-href"); document.getElementById("iframepage").contentWindow.postMessage(JSON.stringify({ "clickHref": clickHref }), "*"); }); } } catch(e) {} }); $(window).scroll(function(e) { var scrollTop = $(document).scrollTop(); if(scrollTop > 279) { $('#titleId').removeClass('hide'); if (moduleTop.length > 0) { for (var i= 0; i< moduleTop.length; i++) { if ((i < moduleTop.length - 1)&&scrollTop > moduleTop[i][1] && scrollTop < moduleTop[i + 1][1]|| (i == moduleTop.length - 1&&scrollTop > moduleTop[i][1])) { $("#tab_title").removeClass('hide'); $("#tab_title a").removeClass('active'); // $("[href= " + moduleTop[i][0] + "]").addClass('active'); $("#tab_title a:eq(" + i + ")").addClass('active'); return; } } } } else { $("#titleId").addClass('hide'); } });// })();</script></html>bb.html
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>Apache Tomcat Examples</title></head><style> html, body { margin: 0px; width: 100%; } .tab-title ul { vertical-align: middle; font-size: 0; -webkit-transition: width ease .8s; transition: width ease .8s; } .tab-title ul li { display: inline-block; text-align: center; font-size: 14px; box-sizing: border-box; max-width: 140px; min-width: 12.5%; } .tab-title ul li.current a { display: block; border-bottom: 3px solid #2277da; color: #2277da; background: #fff; } .tab-title ul li a { font-size: 14px; color: #333; padding: 0 10px; height: 59px; line-height: 59px; display: inline-block; } .tab-content { margin: 40px 0 60px; position: relative; } .tab-title ul li a:hover,.active {display: block;border-bottom: 3px solid #2277da;color: #2277da !important;background: #fff;cursor: pointer} .fixed-title { position: fixed; z-index: 100; box-shadow: rgba(0, 0, 0, .22) 0 5px 10px -5px; border-bottom: 0; width: 100%; }</style><body> <div class="tab-title" id="tab_title"> <ul> <li class="current"><a data-href="#userGuide" >新手指引</a></li> <li class=""><a data-href="#userImg">客户案例</a></li> <li class=""><a data-href="#userDefined9">产品优势</a></li> <li class=""><a data-href="#featuresV2">产品功能</a></li> </ul> </div> <h3 id="userGuide" class="tab-content-title">新手指引</h3> <div class="tab-content-detail qc-wrapper"> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> </div> <h3 id="userImg" class="tab-content-title">客户案例</h3> <div class="tab-content-detail qc-wrapper"> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>1111</p> </div> <h3 id="userDefined9" class="tab-content-title">产品优势</h3> <div class="tab-content-detail qc-wrapper"> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> </div> <h3 id="featuresV2" class="tab-content-title">产品功能</h3> <div class="tab-content-detail qc-wrapper"> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>1111</p> <p>1111</p> </div></body><script src="jquery-1.8.3.min.js"></script><script>// $(function () { /*** 绑定事件监听函数* ele 绑定事件元素* event 绑定事件* func 绑定事件的方法*/function myAddEventListener(ele, event, func) { try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 ele.addEventListener(event,func,false); } catch(e){ try{ // IE8.0及其以下版本 ele.attachEvent('on' + event,func); } catch(e){ // 早期浏览器 ele['on' + event] = func; } } }// 获取顶层导航点击元素，并在子iframe触发点击事件function postTabClick() { myAddEventListener(window, "message", function(res) { var data = JSON.parse(res.data); try { if (data.clickHref) { $("[data-href=" + data.clickHref + "]").click(); } } catch(e) { } });}// 子iframe导航点击后，获取当前点击元素对应的模块到子iframe顶层的高度function jumpScorll() { $("#tab_title").on('click', 'a', function() { var myHref = $(this).data('href'); var scrollTop = $(myHref).position().top; top.postMessage(JSON.stringify({ "scrollTop": scrollTop + 218, "selectHref": myHref }), '*'); });}// 获取各个模块到子iframe的高度function getModuleTop() { var moduleTop = {}; $('#tab_title a').each(function() { var href = $(this).data('href'); moduleTop[href] = $(href).position().top; }); return moduleTop;}// 复制子iframe导航到顶层function copyTab() { var ip = window.location.protocol + "//" + window.location.host; var height = $('body').height(); top.postMessage(JSON.stringify({ "tabDom": '<style>' + '.tab-title ul {vertical-align: middle;font-size: 0;-webkit-transition: width ease .8s;transition: width ease .8s;}' + '.tab-title ul li {display: inline-block;text-align: center;font-size: 14px;box-sizing: border-box;max-width: 140px;min-width: 12.5%;height: 59px}' + '.tab-title ul li a {font-size: 14px;color: #333; width: 100%;height: 59px;line-height: 59px;display: inline-block; text-decoration: none;}' + '.tab-content {margin: 40px 0 60px;position: relative;}' + '.tab-title ul li a:hover,.active {display: block;border-bottom: 3px solid #2277da;color: #2277da !important;background: #fff;cursor: pointer}' + '</style>' + '<div class="tab-title hide" id="tab_title">' + '<ul>' + '<li ><a class="active" data-href="#userGuide" >新手指引</a></li>' + '<li><a data-href="#userImg">客户案例</a></li>' + '<li><a data-href="#userDefined9" >产品优势</a></li>' + '<li><a data-href="#featuresV2">产品功能</a></li>' + '</ul>' + '</div>', "moduleTop": getModuleTop(), "height": height }), '*');}copyTab();jumpScorll();postTabClick();// })();</script></html>阅读全文
0 0
- 跨域的页面中导航随滚动条的滚动发生变化
- 同一页面中随滚动条变化的菜单
- 页面滚动条 body的滚动条
- iOS：导航条滚动透明度随着tableView的滚动而变化
- 点击导航缓动至滚动条对应位置，滚动页面时设置对应导航的选择状态
- Fragment中设置滚动条随页面滑动的方法
- 页面滚动条的总结
- 页面滚动条的实现
- 滚动中变化的时钟
- 关于滚动条颜色的变化
- 悬浮窗口随滚动条的变化改变
- jquerymobile实现手机导航条的滚动
- JQ带滚动效果的导航条
- 把iframe的滚动条作为页面滚动条
- ASP.NET中添加随滚动条滚动的窗体
- SrollView的内容发生变化时自动滚动的处理
- ASP.NET中页面回传后保持滚动条的位置
- 精确地计算Web页面中滚动条的宽度
- Linux Kettle 闪退问题解决方案
- weblogic怎么修改长长的项目名访问
- npm修改源
- db2数据迁移到oracle
- 设计模式--Observer(转自k_eckel)
- 跨域的页面中导航随滚动条的滚动发生变化
- mac中idea修改单个项目的编码
- elasticsearch之mapping配置
- CF 895C. Square Subsets DP(状压,平方数)
- 大数据与伦理
- 八款最佳的远程桌面工具
- JVM(十四)GC的触发时间
- 软连接和硬连接
- 动态内存开辟 malloc calloc realloc free 函数
