刷新iframe頁面
一定要注意要刷新的iframe頁面與當前頁面(編寫代碼)的關系，同級，父級 如下圖，在【database_box】中刷新【header】，代碼為： window.parent.parent.document.getElementById(‘header’).contentWindow.location.reload(true);
版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
------------------------------------------------------------------------------------------------------------------------------------------
jquery刷新iframe頁面的方法
1，reload 方法，該方法強迫瀏覽器刷新當前頁面。
語法：location.reload([bForceGet])
參數： bForceGet， 可選參數， 默認為 false，從客戶端緩存里取當前頁。true, 則以 GET 方式，從服務端取最新的頁面, 相當於客戶端點擊 F5("刷新")
| 代碼如下 | |
| <script language="JavaScript"> window.location.reload(); </script> |
|
這樣就實現了頁面刷新了，當然還有其它辦法了，那么要刷新框架頁面我們要如何操作
| 代碼如下 | |
//方法1 document.getElementById('FrameID').contentWindow.location.reload(true); //方法2 document.getElementById('youriframe').src=src; |
|
實例：
| 代碼如下 | |
| <iframe id="myframe" width="100%" frameBorder="0" src="test.html" scrolling="no"></iframe> <input type="button" onclick="javascript:refreshFrame();" value="Refresh Frame" /> <script type="text/javascript"> <!-- function refreshFrame(){ document.getElementById('myframe').contentWindow.location.reload(true); } //--> </script> |
|
二。jquery實現強制刷新
$('#iframe').attr('src', $('#iframe').attr('src'));
三，如果是打開的新頁面我們要刷新的話可以使用如下代碼來刷親
| 代碼如下 | |
| //刷新包含該框架的頁面用 <script language=JavaScript> parent.location.reload(); </script> //子窗口刷新父窗口 <script language=JavaScript> self.opener.location.reload(); </script> ( 或 <a href="javascript:opener.location.reload()">刷新</a> ) //刷新另一個框架的頁面用 <script language=JavaScript> parent.另一FrameID.location.reload(); </script> |
|
總結：網上一大堆document.frames('ifrmname').location.reload()已經不能用了
轉載：https://www.cnblogs.com/samwang88/p/036da5e9a2f11cd52b2dd973113d23e1.html
------------------------------------------------------------------------------自己項目----------------------------------------------------------------------------------------------------
miniTab.js
/** * date:2020/02/27 * author:Mr.Chung * version:2.0 * description:layuimini tab框架擴展 */ layui.define(["element", "layer", "jquery"], function (exports) { var element = layui.element, layer = layui.layer, $ = layui.$; // console.log(element); var miniTab = { /** * 初始化tab * @param options */ render: function (options) { options.filter = options.filter || null; options.multiModule = options.multiModule || false; options.urlHashLocation = options.urlHashLocation || false; options.maxTabNum = options.maxTabNum || 20; options.menuList = options.menuList || []; // todo 后期菜單想改為不操作dom, 而是直接操作初始化傳過來的數據 options.homeInfo = options.homeInfo || {}; options.listenSwichCallback = options.listenSwichCallback || function () { }; miniTab.listen(options); miniTab.listenRoll(); miniTab.listenSwitch(options); miniTab.listenHash(options); }, /** * 新建tab窗口 * @param options.tabId * @param options.href * @param options.title * @param options.isIframe * @param options.maxTabNum */ create: function (options) { options.tabId = options.tabId || null; options.href = options.href || null; options.title = options.title || null; options.isIframe = options.isIframe || false; options.maxTabNum = options.maxTabNum || 20; if ($(".layuimini-tab .layui-tab-title li").length >= options.maxTabNum) { layer.msg('Tab窗口已達到限定數量，請先關閉部分Tab'); return false; } var ele = element; if (options.isIframe) ele = parent.layui.element; /** * todo 修改 --start--- */ var str = ''+ options.href+''; let str_new = str.replace(/\//g,'_'); // console.log(str_new,'sss'); //----end ---- ele.tabAdd('layuiminiTab', { title: '<span class="layuimini-tab-active"></span><span>' + options.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>' //用於演示 , content: '<iframe width="100%" id="' + str_new+ '" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + options.href + '"></iframe>' , id: options.tabId }); $('.layuimini-menu-left').attr('layuimini-tab-tag', 'add'); sessionStorage.setItem('layuiminimenu_' + options.tabId, options.title); }, /** * 切換選項卡 * @param tabId */ change: function (tabId) { element.tabChange('layuiminiTab', tabId); }, /** * 刪除tab窗口 * @param tabId * @param isParent */ delete: function (tabId, isParent) { // todo 未知BUG，不知道是不是layui問題，必須先刪除元素 $(".layuimini-tab .layui-tab-title .layui-unselect.layui-tab-bar").remove(); if (isParent === true) { parent.layui.element.tabDelete('layuiminiTab', tabId); } else { element.tabDelete('layuiminiTab', tabId); } }, /** * 在iframe層打開新tab方法 */ openNewTabByIframe: function (options) { options.href = options.href || null; options.title = options.title || null; var loading = parent.layer.load(0, {shade: false, time: 2 * 1000}); if (options.href === null || options.href === undefined) options.href = new Date().getTime(); var checkTab = miniTab.check(options.href, true); if (!checkTab) { miniTab.create({ tabId: options.href, href: options.href, title: options.title, isIframe: true, }); } parent.layui.element.tabChange('layuiminiTab', options.href); parent.layer.close(loading); }, /** * 在iframe層關閉當前tab方法 */ deleteCurrentByIframe: function () { var ele = $(".layuimini-tab .layui-tab-title li.layui-this", parent.document); if (ele.length > 0) { var layId = $(ele[0]).attr('lay-id'); miniTab.delete(layId, true); } }, /** * 判斷tab窗口 */ check: function (tabId, isIframe) { // window.location.reload(); // layui.reload(); // 判斷選項卡上是否有 var checkTab = false; if (isIframe === undefined || isIframe === false) { $(".layui-tab-title li").each(function () { var checkTabId = $(this).attr('lay-id'); if (checkTabId != null && checkTabId === tabId) { checkTab = true; } }); } else { parent.layui.$(".layui-tab-title li").each(function () { var checkTabId = $(this).attr('lay-id'); if (checkTabId != null && checkTabId === tabId) { checkTab = true; } }); } // console.log(tabId, isIframe) return checkTab; }, /** * 開啟tab右鍵菜單 * @param tabId * @param left */ openTabRignMenu: function (tabId, left) { miniTab.closeTabRignMenu(); var menuHtml = '<div class="layui-unselect layui-form-select layui-form-selected layuimini-tab-mousedown layui-show" data-tab-id="' + tabId + '" style="left: ' + left + 'px!important">\n' + '<dl>\n' + '<dd><a href="javascript:;" layuimini-tab-menu-close="current">關 閉 當 前</a></dd>\n' + '<dd><a href="javascript:;" layuimini-tab-menu-close="other">關 閉 其 他</a></dd>\n' + '<dd><a href="javascript:;" layuimini-tab-menu-close="all">關 閉 全 部</a></dd>\n' + '</dl>\n' + '</div>'; var makeHtml = '<div class="layuimini-tab-make"></div>'; $('.layuimini-tab .layui-tab-title').after(menuHtml); $('.layuimini-tab .layui-tab-content').after(makeHtml); }, /** * 關閉tab右鍵菜單 */ closeTabRignMenu: function () { $('.layuimini-tab-mousedown').remove(); $('.layuimini-tab-make').remove(); }, /** * 查詢菜單信息 * @param href * @param menuList */ searchMenu: function (href, menuList) { var menu; for (key in menuList) { var item = menuList[key]; if (item.href === href) { menu = item; break; } if (item.child) { newMenu = miniTab.searchMenu(href, item.child); if (newMenu) { menu = newMenu; break; } } } return menu; }, /** * 監聽 * @param options */ listen: function (options) { options = options || {}; options.maxTabNum = options.maxTabNum || 20; /** * 打開新窗口 */ $('body').on('click', '[layuimini-href]', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var tabId = $(this).attr('layuimini-href'), href = $(this).attr('layuimini-href'), title = $(this).text(), target = $(this).attr('target'); var el = $("[layuimini-href='" + href + "']", ".layuimini-menu-left"); layer.close(window.openTips); if (el.length) { $(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this"); $(el).parent().addClass("layui-this"); console.log('ssss'); // location.reload(); } if (target === '_blank') { layer.close(loading); window.open(href, "_blank"); console.log('2222'); return false; } if (tabId === null || tabId === undefined) tabId = new Date().getTime(); var checkTab = miniTab.check(tabId); if (!checkTab) { miniTab.create({ tabId: tabId, href: href, title: title, isIframe: false, maxTabNum: options.maxTabNum, }); console.log('333'); } element.tabChange('layuiminiTab', tabId); layer.close(loading); // window.location.reload(); console.log('334443333'); console.log(tabId); var str = ''+ tabId+''; let str_new = str.replace(/\//g,'_'); if(str_new == "_admin_server_index"){ $("#_admin_server_index").attr('src', $('#_admin_server_index').attr('src')); //location.reload(true); }else if(str_new == "_admin_server_add"){ $("#_admin_server_add").attr('src', $('#_admin_server_add').attr('src')); } // window.parent.parent.document.getElementsByClassName("ifrmname").contentWindow.location.reload(true); }); /** * 在iframe子菜單上打開新窗口 */ $('body').on('click', '[layuimini-content-href]', function () { var loading = parent.layer.load(0, {shade: false, time: 2 * 1000}); var tabId = $(this).attr('layuimini-content-href'), href = $(this).attr('layuimini-content-href'), title = $(this).attr('data-title'), target = $(this).attr('target'); if (target === '_blank') { parent.layer.close(loading); window.open(href, "_blank"); return false; } if (tabId === null || tabId === undefined) tabId = new Date().getTime(); var checkTab = miniTab.check(tabId, true); if (!checkTab) { miniTab.create({ tabId: tabId, href: href, title: title, isIframe: true, maxTabNum: options.maxTabNum, }); } parent.layui.element.tabChange('layuiminiTab', tabId); parent.layer.close(loading); // parent.location.reload(); }); /** * 關閉選項卡 **/ $('body').on('click', '.layuimini-tab .layui-tab-title .layui-tab-close', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var $parent = $(this).parent(); var tabId = $parent.attr('lay-id'); if (tabId !== undefined || tabId !== null) { miniTab.delete(tabId); } layer.close(loading); }); /** * 選項卡操作 */ $('body').on('click', '[layuimini-tab-close]', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var closeType = $(this).attr('layuimini-tab-close'); $(".layuimini-tab .layui-tab-title li").each(function () { var tabId = $(this).attr('lay-id'); var id = $(this).attr('id'); var isCurrent = $(this).hasClass('layui-this'); if (id !== 'layuiminiHomeTabId') { if (closeType === 'all') { miniTab.delete(tabId); } else { if (closeType === 'current' && isCurrent) { miniTab.delete(tabId); } else if (closeType === 'other' && !isCurrent) { miniTab.delete(tabId); } } } }); layer.close(loading); }); /** * 禁用網頁右鍵 */ $(".layuimini-tab .layui-tab-title").unbind("mousedown").bind("contextmenu", function (e) { e.preventDefault(); return false; }); /** * 注冊鼠標右鍵 */ $('body').on('mousedown', '.layuimini-tab .layui-tab-title li', function (e) { var left = $(this).offset().left - $('.layuimini-tab ').offset().left + ($(this).width() / 2), tabId = $(this).attr('lay-id'); if (e.which === 3) { miniTab.openTabRignMenu(tabId, left); } }); /** * 關閉tab右鍵菜單 */ $('body').on('click', '.layui-body,.layui-header,.layuimini-menu-left,.layuimini-tab-make', function () { miniTab.closeTabRignMenu(); }); /** * tab右鍵選項卡操作 */ $('body').on('click', '[layuimini-tab-menu-close]', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var closeType = $(this).attr('layuimini-tab-menu-close'), currentTabId = $('.layuimini-tab-mousedown').attr('data-tab-id'); $(".layuimini-tab .layui-tab-title li").each(function () { var tabId = $(this).attr('lay-id'); var id = $(this).attr('id'); if (id !== 'layuiminiHomeTabId') { if (closeType === 'all') { miniTab.delete(tabId); } else { if (closeType === 'current' && currentTabId === tabId) { miniTab.delete(tabId); } else if (closeType === 'other' && currentTabId !== tabId) { miniTab.delete(tabId); } } } }); miniTab.closeTabRignMenu(); layer.close(loading); }); }, /** * 監聽tab切換 * @param options */ listenSwitch: function (options) { options.filter = options.filter || null; options.multiModule = options.multiModule || false; options.urlHashLocation = options.urlHashLocation || false; options.listenSwichCallback = options.listenSwichCallback || function () { }; element.on('tab(' + options.filter + ')', function (data) { var tabId = $(this).attr('lay-id'); if (options.urlHashLocation) { location.hash = '/' + tabId; } if (typeof options.listenSwichCallback === 'function') { options.listenSwichCallback(); } // 判斷是否為新增窗口 if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') { $('.layuimini-menu-left').attr('layuimini-tab-tag', 'no') } else { $("[layuimini-href]").parent().removeClass('layui-this'); if (options.multiModule) { miniTab.listenSwitchMultiModule(tabId); } else { miniTab.listenSwitchSingleModule(tabId); } } miniTab.rollPosition(); }); }, /** * 監聽hash變化 * @param options * @returns {boolean} */ listenHash: function (options) { options.urlHashLocation = options.urlHashLocation || false; options.maxTabNum = options.maxTabNum || 20; options.homeInfo = options.homeInfo || {}; options.menuList = options.menuList || []; if (!options.urlHashLocation) return false; var tabId = location.hash.replace(/^#\//, ''); if (tabId === null || tabId === undefined || tabId ==='') return false; // 判斷是否為首頁 if(tabId ===options.homeInfo.href) return false; // 判斷是否為右側菜單 var menu = miniTab.searchMenu(tabId, options.menuList); if (menu !== undefined) { miniTab.create({ tabId: tabId, href: tabId, title: menu.title, isIframe: false, maxTabNum: options.maxTabNum, }); $('.layuimini-menu-left').attr('layuimini-tab-tag', 'no'); element.tabChange('layuiminiTab', tabId); return false; } // 判斷是否為快捷菜單 var isSearchMenu = false; $("[layuimini-content-href]").each(function () { if ($(this).attr("layuimini-content-href") === tabId) { var title = $(this).attr("data-title"); miniTab.create({ tabId: tabId, href: tabId, title: title, isIframe: false, maxTabNum: options.maxTabNum, }); $('.layuimini-menu-left').attr('layuimini-tab-tag', 'no'); element.tabChange('layuiminiTab', tabId); isSearchMenu = true; return false; } }); if (isSearchMenu) return false; // 既不是右側菜單、快捷菜單,就直接打開 var title = sessionStorage.getItem('layuiminimenu_' + tabId) === null ? tabId : sessionStorage.getItem('layuiminimenu_' + tabId); miniTab.create({ tabId: tabId, href: tabId, title: title, isIframe: false, maxTabNum: options.maxTabNum, }); element.tabChange('layuiminiTab', tabId); return false; }, /** * 監聽滾動 */ listenRoll: function () { $(".layuimini-tab-roll-left").click(function () { miniTab.rollClick("left"); }); $(".layuimini-tab-roll-right").click(function () { miniTab.rollClick("right"); }); }, /** * 單模塊切換 * @param tabId */ listenSwitchSingleModule: function (tabId) { $("[layuimini-href]").each(function () { if ($(this).attr("layuimini-href") === tabId) { // 自動展開菜單欄 var addMenuClass = function ($element, type) { if (type === 1) { $element.addClass('layui-this'); if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) { $(".layuimini-header-menu li").attr('class', 'layui-nav-item'); } else { addMenuClass($element.parent().parent(), 2); } } else { $element.addClass('layui-nav-itemed'); if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) { $(".layuimini-header-menu li").attr('class', 'layui-nav-item'); } else { addMenuClass($element.parent().parent(), 2); } } }; addMenuClass($(this).parent(), 1); return false; } }); }, /** * 多模塊切換 * @param tabId */ listenSwitchMultiModule: function (tabId) { $("[layuimini-href]").each(function () { if ($(this).attr("layuimini-href") === tabId) { // 自動展開菜單欄 var addMenuClass = function ($element, type) { if (type === 1) { $element.addClass('layui-this'); if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) { var moduleId = $element.parent().attr('id'); $(".layuimini-header-menu li").attr('class', 'layui-nav-item'); $("#" + moduleId + "HeaderId").addClass("layui-this"); $(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide'); $("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this'); } else { addMenuClass($element.parent().parent(), 2); } } else { $element.addClass('layui-nav-itemed'); if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) { var moduleId = $element.parent().attr('id'); $(".layuimini-header-menu li").attr('class', 'layui-nav-item'); $("#" + moduleId + "HeaderId").addClass("layui-this"); $(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide'); $("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this'); } else { addMenuClass($element.parent().parent(), 2); } } }; addMenuClass($(this).parent(), 1); return false; } }); }, /** * 自動定位 */ rollPosition: function () { var $tabTitle = $('.layuimini-tab .layui-tab-title'); var autoLeft = 0; $tabTitle.children("li").each(function () { if ($(this).hasClass('layui-this')) { return false; } else { autoLeft += $(this).outerWidth(); } }); $tabTitle.animate({ scrollLeft: autoLeft - $tabTitle.width() / 3 }, 200); }, /** * 點擊滾動 * @param direction */ rollClick: function (direction) { var $tabTitle = $('.layuimini-tab .layui-tab-title'); var left = $tabTitle.scrollLeft(); if ('left' === direction) { $tabTitle.animate({ scrollLeft: left - 450 }, 200); } else { $tabTitle.animate({ scrollLeft: left + 450 }, 200); } } }; exports("miniTab", miniTab); });