การระบุเนื้อหาของ iframe แทนแอตทริบิวต์ src ไปยังเพจ

90

ฉันกำลังดำเนินการกับแบบฟอร์มที่มีอินพุตไฟล์สำหรับอัปโหลดรูปภาพ มีonchange()เหตุการณ์สำหรับอินพุตเหล่านั้นที่ส่งรูปภาพไปยังiframeจากนั้นโหลดรูปภาพที่อัปโหลดลงในฟอร์มแบบไดนามิกโดยมีฟิลด์ที่จะแก้ไขสำหรับรูปภาพเหล่านั้น (เช่นชื่อและการแปลตามพื้นที่ทางภูมิศาสตร์ )

เนื่องจากฉันไม่สามารถซ้อนแบบฟอร์มได้file_inputจึงมีอยู่ในiframeไฟล์. ในท้ายที่สุดฉันใช้ไฟล์iframeภายในของอีกiframeอัน ดังนั้นฉันจึงมีสิ่งนี้:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

และ HTML ที่โหลดลงในiframeนั้นเป็นสิ่งที่ต้องการ (ไม่รวมhtml,headและbodyแท็ก)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

วิธีนี้ใช้งานได้ดียกเว้นการโหลดครั้งแรกใช้เวลาสองถึงสามวินาทีiframeดังนั้นอินพุตไฟล์จึงไม่โหลดพร้อมกับส่วนที่เหลือของหน้า สิ่งนี้ไม่เหมาะกับสายตา ฉันสามารถแก้ไขได้ถ้าฉันสามารถระบุiframeเนื้อหาโดยไม่จำเป็นต้องโหลดหน้าอื่น (ระบุไว้file_input_urlในหน้าแรกiframe)

มีวิธีระบุiframeเนื้อหาในเอกสารเดียวกันหรือไม่หรือระบุเฉพาะกับsrcแอตทริบิวต์โดยต้องโหลดหน้าอื่น

html iframe

— orlox
แหล่งที่มา

ไม่ควรใช้เวลา "สองถึงสามวินาที" ในการโหลด iframe นั้น ฉันคาดหวังว่ามันจะมากกว่าหนึ่งในสิบของมิลลิวินาทีบวกกับ "เวลากัด" (ซึ่งควรเป็นมิลลิวินาทีด้วย) คุณควรตรวจสอบว่าอะไรเป็นสาเหตุของความล่าช้า - อาจมีบางอย่างผิดปกติกับเซิร์ฟเวอร์ของคุณ

— Abhi Beckert

96

คุณสามารถ.write()เนื้อหาลงในเอกสาร iframe ตัวอย่าง:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

— Guffa
แหล่งที่มา

1

เคยคิดเกี่ยวกับความเป็นไปได้นี้อย่างไรก็ตาม html ที่ต้องโหลดลงใน iframe นั้นซับซ้อนและการจัดการมันทั้งหมดใน javascript เพื่อที่จะเขียนลงใน iframe จะทำให้การใช้งานไม่ชัดเจนมากเกินไป (จนถึงจุดที่ฉันต้องการ ปล่อยให้มันเป็น)

— orlox

2

@orlox: รับเนื้อหาของคุณจากเซิร์ฟเวอร์โดยใช้ Ajax และฉีดเข้าไป หากคุณไม่ต้องการที่จะไปทางนั้นให้ซ่อนdivองค์ประกอบที่มีเนื้อหาของคุณและวางเนื้อหาในiframeระหว่างและ<body> </body>

— stackular

11

ยิ่งฉันเรียนรู้เกี่ยวกับข้อ จำกัด ของ iframes มากเท่าไหร่ฉันก็ยิ่งเกลียดพวกเขามากขึ้นเท่านั้น

— John Magnolia

1

ฉันจะหลีกเลี่ยงเครื่องหมายคำพูดเดี่ยวโดยใช้วิธีนี้ได้อย่างไร บางส่วนเป็น HTML ที่สำคัญ (เช่น class = 'example') บางส่วนเป็น CSS ที่สำคัญ (เช่น font-family: 'Verdana';) และบางส่วนเป็นเนื้อหา (เช่น George O'Malley)

— Dan Bechard

2

@Dan: หากต้องการหลีกเลี่ยงค่าที่จะใช้ในสตริง JavaScript ที่คั่นด้วยเครื่องหมายอะพอสทรอฟีคุณต้องหลีกเลี่ยงแบ็กสแลชก่อนจากนั้นจึงใช้เครื่องหมายอะพอสทรอฟี ตัวอย่างเช่นใช้ C # doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');เพื่อส่งออกสตริงในรหัสนี้:

— Guffa

36

ตอนนี้ iframe รองรับsrcdocซึ่งสามารถใช้เพื่อระบุเนื้อหา HTML ของเพจเพื่อแสดงในอินไลน์เฟรม

— Ayush Gupta
แหล่งที่มา

2

IE ไม่รองรับสิ่งนี้ไม่ถูกต้อง แต่คุณสามารถตรวจสอบCaniuseเพื่อดูสถานะล่าสุดได้

— Ayush Gupta

เอกสารเกี่ยวกับ MDN

— Benoit Blanchon

22

คุณสามารถใช้data:URL ในsrc:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

<iframe></iframe>

ขยายข้อมูลโค้ด

ความแตกต่างระหว่าง srcdoc =“...” และ src =“ข้อมูล: text / html, ...” ใน iframe

แปลง HTML เป็นข้อมูล: ข้อความ / html ที่เชื่อมโยงโดยใช้ JavaScript

— ผู้ใช้
แหล่งที่มา

1

คุณไม่จำเป็นต้องใช้ JavaScript ใด ๆ ด้วยซ้ำ: srcสามารถระบุแอตทริบิวต์แบบอินไลน์ได้หาก Escape เช่นใช้rawurlencodeใน PHP:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— Jake

Microsoft ได้เพิ่มการสนับสนุนสำหรับสิ่งนี้ในเวลาเดียวกันกับที่พวกเขาเพิ่มการสนับสนุนsrcdocและsrcdocเป็นวิธีที่ดีกว่าในการทำเช่นนี้ URL ข้อมูลได้รับการสนับสนุนอย่างกว้างขวางสำหรับรูปภาพและ CSS - เท่าที่ฉันทราบว่าไม่มี Internet Explorer เวอร์ชันใดรองรับใน iframe

— Abhi Beckert

6

เมื่อใช้ร่วมกับสิ่งที่ Guffa อธิบายคุณสามารถใช้เทคนิคที่อธิบายไว้ใน คำอธิบายของ <script type = "text / template"> ... </script>เพื่อจัดเก็บเอกสาร HTML ในscriptองค์ประกอบพิเศษ(ดูลิงก์สำหรับคำอธิบายเกี่ยวกับ วิธีการทำงาน) ง่ายกว่าการจัดเก็บเอกสาร HTML เป็นสตริงมาก

— ximo
แหล่งที่มา

ในความคิดที่สองนั่นจะไม่ได้ผลดีนักสำหรับเอกสาร HTML แบบเต็ม แท็กเช่น<html>, <body>, <script>เท่านั้นที่จะสร้างความสับสนให้เบราว์เซอร์ที่จะหมดการแสดงผลของเอกสาร

— ximo

ซึ่งดูเหมือนจะไม่ใช่ปัญหาแท็ก HTML ภายในสคริปต์จะถูกละเว้น

— HBP

คุณพูดถูก :) ฉันยังไม่ได้ลองใช้เทคนิคนี้จริงๆตอนที่ฉันเขียนมันและต้องหยิบสมมติฐานนั้นมาจากที่ไหนสักแห่ง ฉันพบในภายหลังว่าทุกสิ่งภายใน<script>แท็กจะถูกเบราว์เซอร์ละเลย .. ขอบคุณที่แก้ไขฉัน!

— ximo