JS操作Iframe获取到Iframe中的内容+ListView+DataPager分页

本文介绍了如何使用JavaScript在Iframe中操作内容，并结合ListView和DataPager进行数据分页。示例包括Default.aspx后台代码以及Default2.aspx的前后台代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var txt = document.getElementById("txtShowIframe");
            txt.onmousedown = function () {
                document.getElementById("div_showIfrmae").style.display = "block";
            }
            txt.onmouseover = function () {
                document.getElementById("div_showIfrmae").style.display = "none";
            }
            //按钮点击事件
            document.getElementById("btnShowValue").onclick = function () {
                alert(document.getElementById("txtShowIframe").value);
            }
            f();
        }
        //此方法用来获取iframe中src嵌入页面的内容
        function f() {
            var doc;
            //判断浏览器
            if (document.all) {//IE   
                doc = document.frames["MyIFrame"].document;
            } else {//Firefox      
                doc = document.getElementById("MyIFrame").contentDocument;
            }
            document.getElementById("txtShowIframe").value = "<%=stuAddress %>";//将iframe中拿到的值放到文本框中(值在后台接受)
        }   
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
         <input type="text" id="txtShowIframe" style="text-align:right;" />
         <input type="button" id="btnShowValue" value="显示从iframe中点击到的值" />
        <div id="div_showIfrmae" style="display:none; width:880px; height:445px;">
            <iframe src="Default2.aspx" id = "MyIFrame"  style=" color: #990099;  width: 470px; height: 180px; border:1px solid green; margin:10px 123px;" name = "MyIFrame" frameborder="0"></iframe>
        </div>
    </div>

    </form>
</body>
</html>

Default.aspx后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    public string stuAddress = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Request.QueryString["stuAddress"] != null)
            {
                stuAddress = Request.QueryString["stuAddress"].ToString();
            }
        }

    }
 
}

//Default2.aspx前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .div_show{ border:1px solid red;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div_show">
        <table>
        <tr>
            <td>学生邮箱</td>
            <td>学生地址</td>
        </tr>
        <asp:ListView ID="lsvShowStudentInfo" runat="server">
            <LayoutTemplate>
            <tr id="itemPlaceholder" runat="server"></tr>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td><%#Eval("StuEmail") %></td>
                    <td onclick="parent.location.href='Default.aspx?stuAddress=<%#Eval("StuAddress") %>'" id="stuAddress" style=" cursor:pointer;"><%#Eval("StuAddress") %></td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
        </table>
        <asp:DataPager runat="server" ID="dpg" PageSize="6" PagedControlID="lsvShowStudentInfo">
            <Fields>
                <asp:NextPreviousPagerField ShowFirstPageButton="true" ShowNextPageButton="false" ShowLastPageButton="false" />
                <asp:NumericPagerField ButtonCount="3" />
                <asp:NextPreviousPagerField ShowFirstPageButton="false" ShowLastPageButton="true" ShowPreviousPageButton="false" />
            </Fields>
        </asp:DataPager>
    </div>
    </form>
</body>
</html>

//Default2.aspx后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;

public partial class Default2 : System.Web.UI.Page
{
    string connStr = ConfigurationManager.ConnectionStrings["Connection String"].ConnectionString; //获取webconfig里面的连接串
    
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection conn = new SqlConnection(connStr);
        conn.Open();
        string sql = "select * from student";
        SqlDataAdapter adapter = new SqlDataAdapter(sql,conn);
        DataSet ds = new DataSet();
        adapter.Fill(ds);
        lsvShowStudentInfo.DataSource = ds;
        
        conn.Close();
    }
    protected void Page_PreRender(object sender, EventArgs e) {
        lsvShowStudentInfo.DataBind();
    }
}