รหัสมาตรฐานสำหรับ IFRAME มีวิธีแทนที่ URL src ด้วยโค้ด Just html หรือไม่ ดังนั้นปัญหาของฉันจึงง่ายมากฉันมีหน้าเว็บที่โหลดเนื้อหา HTML จาก MYSQL ฉันต้องการนำเสนอโค้ดนั้นในเฟรมเพื่อให้มันแสดงผลด้วยตัวเองโดยไม่ขึ้นกับส่วนที่เหลือของหน้าและอยู่ในขอบเขตของขอบเฉพาะนั้น
<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe> คำตอบ:
คุณสามารถทำได้ด้วย URL ข้อมูล ซึ่งรวมถึงเอกสารทั้งหมดใน HTML สตริงเดียว ตัวอย่างเช่น HTML ต่อไปนี้:
<html><body>foo</body></html>สามารถเข้ารหัสได้ดังนี้:
data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3Eแล้วตั้งเป็นsrcแอตทริบิวต์ของ iframe ตัวอย่าง .
แก้ไข: ทางเลือกอื่นคือการดำเนินการกับ Javascript เกือบจะเป็นเทคนิคที่ฉันเลือก คุณไม่สามารถรับประกันได้ว่าเบราว์เซอร์จะยอมรับ URL ข้อมูลได้นานเพียงใด เทคนิค Javascript จะมีลักษณะดังนี้:
var iframe = document.getElementById('foo'),
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = 'Hello world';
แก้ไข 2 (ธันวาคม 2017) : ใช้แอตทริบิวต์srcdocของ Html5 เช่นเดียวกับในคำตอบของSaurabh Chandra Patelซึ่งตอนนี้ควรเป็นคำตอบที่ยอมรับ! หากคุณสามารถตรวจจับ IE / Edge ได้อย่างมีประสิทธิภาพเคล็ดลับคือการใช้ไลบรารี srcdoc-polyfillสำหรับพวกเขาเท่านั้นและแอตทริบิวต์ srcdoc "บริสุทธิ์" ในเบราว์เซอร์ที่ไม่ใช่ IE / Edge ทั้งหมด (ตรวจสอบcaniuse.comให้แน่ใจ)
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>Blocked a frame with origin "http://localhost" from accessing a cross-origin frameโครเมี่ยมพร้อมบ่นเกี่ยวกับ
innerHTMLเบราว์เซอร์จะไม่เรียกใช้แท็กสคริปต์ที่สืบทอดมา สำหรับข้อมูลเพิ่มเติมโปรดดูส่วนข้อควรพิจารณาด้านความปลอดภัย ของหน้า Element.innerHTML MDN
ใช้เอกสารhtml5แอตทริบิวต์ใหม่srcdoc(srcdoc-polyfill)
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>รองรับเบราว์เซอร์ - ทดสอบในเบราว์เซอร์ต่อไปนี้:
Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50
ตาม W3Schools HTML 5 ช่วยให้คุณสามารถทำได้โดยใช้แอตทริบิวต์ "srcdoc"ใหม่ แต่ดูเหมือนว่าการสนับสนุนเบราว์เซอร์จะมีข้อ จำกัด มาก