รับองค์ประกอบจากภายใน iFrame

คุณจะได้รับ<div>จากภายในได้<iframe>อย่างไร

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

คุณสามารถเขียนได้ง่ายขึ้น:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

และเอกสารภายในอันแรกที่ถูกต้องจะถูกส่งกลับ

เมื่อคุณได้รับเอกสารภายในคุณก็สามารถเข้าถึงภายในได้เช่นเดียวกับที่คุณเข้าถึงองค์ประกอบใด ๆ ในหน้าปัจจุบันของคุณ ( innerDoc.getElementById... ฯลฯ )

สำคัญ:ตรวจสอบให้แน่ใจว่า iframe อยู่ในโดเมนเดียวกันมิฉะนั้นคุณจะไม่สามารถเข้าถึง internals ได้ นั่นจะเป็นการเขียนสคริปต์ข้ามไซต์

อย่าลืมเข้าถึง iframe หลังจากโหลดเสร็จแล้ว วิธีเก่า แต่เชื่อถือได้โดยไม่มี jQuery:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>

window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() เป็นฟังก์ชั่นภายในหน้าและการกระทำที่ฟังก์ชั่นนั้น

คำตอบข้างต้นให้คำตอบที่ดีโดยใช้ Javscript นี่เป็นวิธีแก้ปัญหา jQuery ง่าย ๆ :

$('#iframeId').contents().find('div')

เคล็ดลับที่นี่คือ.contents()วิธีการของ jQuery .children()ซึ่งแตกต่างจากที่สามารถรับองค์ประกอบ HTML เท่านั้น.contents()สามารถรับทั้งโหนดข้อความและองค์ประกอบ HTML นั่นเป็นสาเหตุที่เราสามารถรับเนื้อหาเอกสารของ iframe ได้โดยใช้มัน

อ่านเพิ่มเติมเกี่ยวกับ jQuery .contents(): .contents ()

โปรดทราบว่า iframe และหน้าจะต้องอยู่ในโดเมนเดียวกัน

ไม่มีคำตอบอื่นใดที่เหมาะกับฉัน ฉันสิ้นสุดการสร้างฟังก์ชันภายใน iframe ของฉันที่ส่งคืนวัตถุที่ฉันค้นหา:

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

จากนั้นคุณเรียกใช้ฟังก์ชันนั้นเพื่อดึงองค์ประกอบ:

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();

หาก iframe ไม่ได้อยู่ในโดเมนเดียวกันซึ่งคุณไม่สามารถเข้าถึง internals จาก parent แต่คุณสามารถแก้ไขซอร์สโค้ดของ iframe ได้จากนั้นคุณสามารถแก้ไขเพจที่แสดงโดย iframe เพื่อส่งข้อความไปยังหน้าต่างพาเรนต์ซึ่งช่วยให้ คุณสามารถแบ่งปันข้อมูลระหว่างหน้า แหล่งที่มาบางส่วน:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• Html5 - ข้ามเบราว์เซอร์ Iframe postmessage - ลูกกับผู้ปกครอง?
• iframe ข้ามไซต์ postMessage จากเด็กสู่ผู้ปกครอง

โค้ดด้านล่างจะช่วยให้คุณค้นหาข้อมูล iframe

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;