จะสร้าง iframe 1 อัน แล้วให้คลิกลิงค์เมนู จะเปลี่ยนหน้าเว็บใน iframe

ตามหัวข้อเลยฮะ

ผมจะสร้าง iframe 1 อัน พอคลิกลิงค์ มันก็จะเปลี่ยนหน้าเว็บที่อยู่ใน iframe

เช่นเปิดเว็บมาครั้งแรก  iframe จะเป็นเว็บ A

พอกดลิงค์ A_A จะเปลี่ยน  iframe เป็นเว็บ B

พอกดลิงค์ A_B จะเปลี่ยน  iframe เป็นเว็บ C

ทำนองนี้อะฮะ พอช่วยได้มั้ย

สร้าง iframe กำหนด แล้วกำหนด ความกว่้าง ความสูง และก็ชื่อ สำหรับอ้างอิง เวลากด ลิ้งค์ ก็เลือก target เป็นชื่อ iframe นั้น

ลองตามโค้ดหน้านี้ดู


ตัวอย่าง

ตัวอย่าง ลิ้งค์ที่ 1 ลิ้งค์ที่ 2 ลิ้งค์ที่ 3

เมื่อคลิกที่ลิ้งค์ ทั้งสาม ขนาดความสูงของ iframe จะขยายตามขนาดของ เพจที่เปิด

ตัวอย่างโค้ด 

<p> ตัวอย่าง 
<a href="/demo/page_navi.php" target="myIframe">ลิ้งค์ที่ 1</a> 
<a href="/demo/page_navi2.php" target="myIframe">ลิ้งค์ที่ 2</a> 
<a href="/demo/page_navi3.php" target="myIframe">ลิ้งค์ที่ 3</a>
</p>
<p>
  <iframe frameborder="0" height="100" id="myIframe" name="myIframe" scrolling="no" src="/demo/page_navi2.php" width="800"></iframe>
</p>

ตัวอย่าง ลิ้งค์ที่ 1 ลิ้งค์ที่ 2 ลิ้งค์ที่ 3

'

<p> ตัวอย่าง 
<a href="/demo/page_navi.php" target="myIframe">ลิ้งค์ที่ 1</a>   
<a href="/demo/page_navi2.php" target="myIframe">ลิ้งค์ที่ 2</a>   
<a href="/demo/page_navi3.php" target="myIframe">ลิ้งค์ที่ 3</a>  
</p>
<p>
  <iframe style="display:none;" frameborder="0" height="100" id="myIframe" name="myIframe" scrolling="no" 
  src="" width="600" ></iframe>
</p>'
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript">
$(function(){
	$("a[target=myIframe]").click(function(){
		var thisURL=$(this).attr("href");
		if($("#myIframe").css("display")=="none"){
			$("#myIframe").slideToggle( "slow", function() {
				$("#myIframe").attr("src",thisURL);
				event.preventDefault();
			});
		}
	});
});
</script>

นี้คือเว็บที่ผมได้ทำนะฮะ http://www.finzen.org/

จากที่ลองคลิกตรง ด้านซ้ายของเว็บคือ สมัครสมาชิกนะฮะ ก็ยืดเว็บสะยาวเลยทีเดียว = ="

ผมจะทำยังไงได้บ้างฮะ 

1. จะกำหนดให้เปลี่ยนหลายหน้าแล้ว ให้ไอเฟรมเลื่อนตามขนาดของหน้านั้น  ในส่วนที่เราต้องการให้แสดงเท่านั้น

2. ถ้าหน้าที่เรียกมาแสดงมันยาวไป เราจะจำกัดความยาวของด้านล่างยังไงอะฮะ โดยจะให้มันเลื่อนได้สุดเท่านี้้ ถ้ายาวเกินจากนี้ ก็จะค่อยๆซ่อนด้านล่างไป

ข้อ 1 ลองดูตามหัวข้อนี้ดู

เช่น ถ้า ไฟล์ iframe ที่เราเปิด สูงกว่า 400 ก็ให้ กำหนด ความสูงไว้ เป็น 400 ถ้าน้อยกว่านั้น ก็กำหนดตามความสูงของไฟล์ iframe

ประยุกต์จากเนื้อหา 
https://www.ninenik.com/content.php?arti_id=220 via @ninenik


โดยเพิ่มโค้ดนี้เข้าไป
 

heightDiv=(heightDiv>400)?400:heightDiv;

เป็น
 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">   
 function sizeFrame() {  
$("#myIframe", top.document).css({ height: 0 });  
// กำหนดความสูงของ iframe ให้เท่ากับ 0  
var heightDiv=$(document).height();   
heightDiv=(heightDiv>400)?400:heightDiv;
// หาความสูงของเพจ pagecontent.html  
$("#myIframe", top.document).height(heightDiv);   
// กำหนดความสูงของ iframe ให้เท่ากับความสูงของ pagecontent.html  
}  
$(function(){  
          sizeFrame();   
          // เรียกใช้ฟังก์ขันเมื่อไฟล์ pagecontent.html โหลดเสร็จแล้ว  
          $("#myIframe").load(sizeFrame);   
         // เรียกใช้ฟังก์ขันเมื่อ iframe โหลด ไฟล์  pagecontent.html  
});  
</script> 

ใส่ในไฟล์ที่อยู่ใน iframe