You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

用<Object>替换<Frameset>后,能否不刷新整页动态更新Object的URL?

解决方案:替代Frameset实现局部页面更新(HTML5 + ASP.NET)

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.

步骤:

  1. 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>
  1. Have each dynamic page (like MAIN.aspx or NewPage.aspx) inherit from this Master Page, only filling in the MainContent section:
<!-- 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 target workflow perfectly.
  • If you're using ASP.NET Web Forms, Master Pages are the most integrated solution, playing nicely with your C# backend.
  • object tags work but are less flexible than iframes.
  • AJAX loading is great for static content but has limitations with server-side controls.

内容的提问来源于stack exchange,提问作者pmcs

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.06 07:47:35