jQueryの.load()関数を使って別ページの指定箇所のみをピンポイントで取得し、その取得した情報を表示する方法をご紹介します。
Contents
ディスプレイ広告
.load()を使って別ページの指定箇所を取得表示するためのボタンと表示エリアのCSS記述
※取得表示するためのボタン(#idLoadBtn)と表示エリア(#idLoadLlink)のCSS記述です。必要に応じて変更して下さい。
<style type="text/css">
<!--
#idLoadBtn{
cursor:pointer;
margin:auto;
width:120px;
text-align:center;
padding:12px;
background-color:#FF4242;
color:#FFFFFF;
border:solid 1px #FF4242;
-moz-box-shadow: 0 0 4px #FF4242, 0 0 12px #FF4242 5px 5px 5px #FF4242;
-webkit-box-shadow: 0 0 4px #FF4242, 0 0 12px #FF4242, 5px 5px 5px #FF4242;
font-size:18px;
}
#idLoadBtn:hover{
cursor:pointer;
margin:auto;
width:120px;
text-align:center;
padding:12px;
background-color:#FFFFFF;
color:#FF8686;
border:solid 1px #FF8686;
-moz-box-shadow: 0 0 2px #FF8686, 0 0 6px #FF8686 3px 3px 3px #FF8686;
-webkit-box-shadow: 0 0 2px #FF8686, 0 0 6px #FF8686, 3px 3px 3px #FF8686;
font-size:18px;
}
#idLoadLlink{
cursor:pointer;
margin:auto;
width:700px;
border:solid 1px #FF4242;
color:#FF4242;
}
#idLoadLlink a{
color:#FF4242;
line-height:1.4em;
}
-->
</style>
jQueryの.load()を使って別ページの指定箇所を取得表示するJavaScriptの記述
※ボタン(#idLoadBtn)をクリックすると別ページURLの指定箇所を.load()で取得し、取得した内容を表示エリア(#idLoadLlink)に出力します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#idLoadBtn").click(function(){
$("#idLoadLlink").load("/ #categories-2 ul li");
});
});
</script>
.load()を使って別ページの指定箇所を取得表示するためのボタンと表示エリアのHTMLの記述
※取得表示するためのボタン(id=”idLoadBtn”)と表示エリア(id=”idLoadLlink”)です。必要に応じて変更して下さい。
<div id="idLoadBtn">クリック</div>
<div id="idLoadLlink">
このエリアに取得情報を表示します。
</div>
<!--/idLoadLlink-->
jQueryの.loadを使って別ページの指定箇所を取得表示するデモページ
jQueryの.loadを使って別ページの指定箇所を取得表示するデモページ
別ドメインのURL(クロスドメイン)は指定出来ないと思いますが、今度検証してみます。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。