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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา จะสร้าง iframe 1 อัน แล้วให้คลิกลิงค์เมนู จะเปลี่ยนหน้าเว็บใน iframe

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

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

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

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

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

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


Focusz 223.205.7.xxx 17-03-2014 17:57:39

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

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

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

ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery 

ตัวอย่าง

ตัวอย่าง ลิ้งค์ที่ 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>


ninenik 115.67.6.xxx 17-03-2014
 ความคิดเห็นที่ 2
แล้วพอจะวิธีทำให้ ตอนแรกไม่มี iframe คือซ่อนไว้ แล้วพอเราคลิกลิงค์หรือรูป มันก็จะแสดงขึ่นมามั้ยฮะ


Focusz 171.5.87.xxx 18-03-2014 15:00
 ความคิดเห็นที่ 3

ตัวอย่าง ลิ้งค์ที่ 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>


ninenik 115.67.69.xxx 18-03-2014
 ความคิดเห็นที่ 4
นี้คือเว็บที่ผมได้ทำนะฮะ http://www.finzen.org/

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

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

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

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


Focusz 171.5.87.xxx 18-03-2014 22:53
 ความคิดเห็นที่ 5
ข้อ 1 ลองดูตามหัวข้อนี้ดู
ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery 
https://www.ninenik.com/content.php?arti_id=220 via @ninenik

ส่วนข้อ 2 ไม่ค่อยเข้าใจ แต่ถ้า หาก iframe นั้นมีขนาดมากเกินไป เราสามารถกำหนด ให้ขนาด นั้นไม่เกิน เท่าไหร่ ได้

เช่น ถ้า ไฟล์ 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
 



ninenik 124.120.192.xxx 19-03-2014
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ