用<Object>替换<Frameset>后,能否不刷新整页动态更新Object的URL?
Alright, let's break this down for you—you've got a classic ASP site moving to ASP.NET with HTML5, and you're looking to replicate that frameset-style partial page update without using deprecated framesets. Here's what you need to know:
一、直接用object标签实现局部更新
Good news: you absolutely can dynamically update the URL of an object tag to mimic the frameset behavior. You just need a bit of JavaScript to modify its data property.
示例代码(适配你的现有结构)
Say you have links in MainMenu.aspx that need to update the right-hand main content area:
// 在MainMenu.aspx的链接点击事件中调用 function updateMainContent(newUrl) { // 从父页面找到主内容区域的object元素 const mainObject = parent.document.getElementById('column1').querySelector('object'); mainObject.data = newUrl; }
Then bind this function to your menu links:
<!-- MainMenu.aspx中的链接 --> <a href="NewPage.aspx" onclick="updateMainContent(this.href); return false;">切换主内容页面</a>
注意:确保所有页面都在同源环境下(比如你的localhost测试环境),不然浏览器的同源策略会阻止跨页面DOM操作。
二、更推荐的HTML5合规替代方案
While object works, there are better options that fit more naturally with ASP.NET and HTML5 standards:
1. 使用iframe(替代frameset的首选)
Iframes are fully supported in HTML5 and are designed exactly for this kind of embedded page scenario. Even better, they natively support the target attribute just like framesets did.
调整你的布局为iframe版本:
<div id="header" class="header"> <iframe src="https://localhost:44365/HEADER.aspx" width="100%" height="100%" frameborder="0"></iframe> </div> <div id="main" class="row"> <div id="column2" class="column left"> <div id="left_top" class="left_top"> <iframe src="https://localhost:44365/MainMenu.aspx" width="100%" height="100%" frameborder="0" name="leftMenu"></iframe> </div> <div id="left_bottom" class="left_bottom"> <iframe src="https://localhost:44365/RevTable.aspx" width="100%" height="100%" frameborder="0"></iframe> </div> </div> <div id="column1" class="column right"> <iframe src="https://localhost:44365/MAIN.aspx" width="100%" height="100%" frameborder="0" name="mainContent"></iframe> </div> </div>
实现局部更新(和原frameset逻辑完全一致)
Just set the target attribute on your menu links to match the name of the main content iframe:
<!-- MainMenu.aspx中的链接 --> <a href="NewPage.aspx" target="mainContent">切换主内容</a>
Clicking this link will only update the mainContent iframe—no full page refresh, exactly like your old frameset setup.
2. 使用ASP.NET Master Page(最贴合C#后台的方案)
If you're using ASP.NET Web Forms, Master Pages are the most elegant solution. They let you define a reusable layout on the server side, so you avoid all the quirks of embedded tags.
步骤:
- Create a Master Page (e.g.,
Site.Master) with fixed sections and a content placeholder for the dynamic area:
<!-- Site.Master --> <div id="header" class="header"> <!-- 直接嵌入HEADER内容或使用用户控件 --> <asp:ContentPlaceHolder ID="HeaderContent" runat="server"> <uc:HeaderControl runat="server" /> </asp:ContentPlaceHolder> </div> <div id="main" class="row"> <div id="column2" class="column left"> <div id="left_top" class="left_top"> <asp:ContentPlaceHolder ID="LeftMenuContent" runat="server"> <uc:MainMenuControl runat="server" /> </asp:ContentPlaceHolder> </div> <div id="left_bottom" class="left_bottom"> <asp:ContentPlaceHolder ID="RevTableContent" runat="server"> <uc:RevTableControl runat="server" /> </asp:ContentPlaceHolder> </div> </div> <div id="column1" class="column right"> <asp:ContentPlaceHolder ID="MainContent" runat="server"> <!-- 这是唯一会更新的区域 --> </asp:ContentPlaceHolder> </div> </div>
- Have each dynamic page (like
MAIN.aspxorNewPage.aspx) inherit from this Master Page, only filling in theMainContentsection:
<!-- MAIN.aspx --> <%@ Page Title="" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MAIN.aspx.cs" Inherits="YourProject.MAIN" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <!-- 主页面的动态内容 --> </asp:Content>
This way, when you navigate between pages, the server only renders the changing MainContent area, giving you a partial-update feel without any front-end hacks.
3. AJAX加载内容到DIV(纯前端无嵌入方案)
If you want to ditch embedded tags entirely, you can load page content into a div via AJAX. Using jQuery's load() method makes this straightforward:
示例:
<div id="header" class="header"></div> <div id="main" class="row"> <div id="column2" class="column left"> <div id="left_top" class="left_top"></div> <div id="left_bottom" class="left_bottom"></div> </div> <div id="column1" class="column right" id="mainContentDiv"></div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // 页面加载时初始化所有区域 $(function() { $('#header').load('HEADER.aspx'); $('#left_top').load('MainMenu.aspx'); $('#left_bottom').load('RevTable.aspx'); $('#mainContentDiv').load('MAIN.aspx'); }); // 切换主内容 function updateMainContent(url) { $('#mainContentDiv').load(url); } </script>
Bind updateMainContent to your menu links, and you're good to go. Note that this works best for static content—server-side controls might have issues with postbacks since you're loading content dynamically.
总结
- For a quick drop-in replacement for framesets, iframe is your best bet—it's simple and matches your old
targetworkflow perfectly. - If you're using ASP.NET Web Forms, Master Pages are the most integrated solution, playing nicely with your C# backend.
objecttags work but are less flexible than iframes.- AJAX loading is great for static content but has limitations with server-side controls.
内容的提问来源于stack exchange,提问作者pmcs

