jQuery로 다른페이지의 html 요소 로드하는 방법
작성일 15-02-25 15:30
페이지 정보
작성자서방님 조회 152회 댓글 0건본문
출처 : http://www.hoons.net/Board/asptip/Content/31204
jQuery객체의 load 메서드로 엘리먼트의 innerHTML로 삽입할 수 있습니다.
A.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="A" %>
<!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 src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#container').load('B.aspx');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="A" %>
<!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 src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#container').load('B.aspx');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
</div>
</form>
</body>
</html>
B.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="B.aspx.cs" Inherits="B" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="난B페이지"></asp:TextBox>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="B.aspx.cs" Inherits="B" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="난B페이지"></asp:TextBox>
</div>
</form>
</body>
</html>
그러나, 불필요한 요소 혹은 페이지를 해치는 요소들이 그대로 따라오게 되는데요. 아래는 개발자도구로 DOM을 확인한 모습입니다.
저 빨간 화살표의 것들을 제거하고 싶군요. 그렇다면, 로드된 다음에 뭔가 처리를 해줘야겠죠?
아래의 스크립트는 임시 엘리먼트에 load하여 callback에서 가공하는 단계를 보여줍니다.
$('<div/>').load('B.aspx', function(data) {
//raw데이터를 먼저 봅시다.
alert(data);
// jQuery객체를 생성합니다.
var $page = $(data);
// 순수 HTML 문자열만 보도록 하죠.
alert($page.html());
// ID 앞부분이 __ 로 시작하는 INPUT요소의 부모를 찾아서 제거합니다.
// 부모를 제거하는 이유는 해당 INPUT요소가 DIV로 감싸져 있기 때문에 같이 제거하는 것입니다.
$page.find('input[id^="__"]').parent().remove();
// 제거 후의 HTML 결과물을 보도록 하죠.
alert($page.html());
// 필터링이 끝났습니다.
// 원하는 곳에 innerHTML로 삽입합니다.
$('#container').html($page.html());
});
//raw데이터를 먼저 봅시다.
alert(data);
// jQuery객체를 생성합니다.
var $page = $(data);
// 순수 HTML 문자열만 보도록 하죠.
alert($page.html());
// ID 앞부분이 __ 로 시작하는 INPUT요소의 부모를 찾아서 제거합니다.
// 부모를 제거하는 이유는 해당 INPUT요소가 DIV로 감싸져 있기 때문에 같이 제거하는 것입니다.
$page.find('input[id^="__"]').parent().remove();
// 제거 후의 HTML 결과물을 보도록 하죠.
alert($page.html());
// 필터링이 끝났습니다.
// 원하는 곳에 innerHTML로 삽입합니다.
$('#container').html($page.html());
});
아래의 alert 창을 차례로 보시면 load된 data가 단계적으로 제거되는 모습을 눈으로 확인하실 수 있습니다. 추가적인 코드로 좀 더 가공을 하실 수 있겠네요.
개발자도구로 다시 확인해 보니 원하는 요소만 삽입된 것을 볼 수 있습니다.(짝!짝!짝!)
하지만 B.aspx페이지를 수정할 권리가 있다면 굳이 저럴 필요 있을까요? 저라면 B.aspx 페이지에 원하는 부분을 DIV로 감싸고 ID를 부여하여 아래와 같이 선택자를 이용하겠습니다.
$('#container').load('B.aspx #container2');
이것이 BEST네요(^^)
c
댓글목록
등록된 댓글이 없습니다.