Nhận phần tử từ trong iFrame

Làm thế nào để bạn có được một <div>từ trong một <iframe>?

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

Bạn có thể viết đơn giản hơn:

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

và tài liệu bên trong hợp lệ đầu tiên sẽ được trả lại.

Khi bạn nhận được tài liệu bên trong, bạn có thể truy cập nội bộ của nó giống như cách bạn truy cập bất kỳ yếu tố nào trên trang hiện tại của bạn. ( innerDoc.getElementById... vv.)

QUAN TRỌNG: Đảm bảo rằng iframe nằm trên cùng một tên miền, nếu không bạn không thể truy cập vào phần bên trong của nó. Đó sẽ là kịch bản chéo trang.

Đừng quên truy cập iframe sau khi được tải . Cách cũ nhưng đáng tin cậy mà không cần 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() là chức năng bên trong trang và chức năng đó hoạt động trên nó

Các câu trả lời trên đã đưa ra các giải pháp tốt khi sử dụng Javscript. Đây là một giải pháp jQuery đơn giản:

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

Thủ thuật ở đây là .contents()phương thức của jQuery , không giống như .children()chỉ có thể lấy các phần tử HTML, .contents()có thể nhận được cả các nút văn bản và các phần tử HTML. Đó là lý do tại sao người ta có thể lấy nội dung tài liệu của iframe bằng cách sử dụng nó.

Đọc thêm về jQuery .contents(): .contents ()

Lưu ý rằng iframe và trang phải nằm trên cùng một tên miền.

Không có câu trả lời nào khác làm việc cho tôi. Tôi đã kết thúc việc tạo một hàm trong iframe của mình để trả về đối tượng mà tôi đang tìm kiếm:

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

Sau đó, bạn gọi hàm đó như vậy để lấy phần tử:

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

Nếu iframe không nằm trong cùng một miền mà bạn không thể truy cập vào phần bên trong của nó từ cha mẹ nhưng bạn có thể sửa đổi mã nguồn của iframe thì bạn có thể sửa đổi trang được hiển thị bởi iframe để gửi tin nhắn đến cửa sổ cha, cho phép bạn để chia sẻ thông tin giữa các trang. Một số nguồn:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• Html5 - Postmessage chéo trình duyệt chéo - con với cha mẹ?
• chéo trang iframe postMessage từ con sang cha mẹ

Mã dưới đây sẽ giúp bạn tìm ra dữ liệu iframe.

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