Làm cách nào để truy cập nội dung của iframe bằng jQuery?

116

Làm cách nào để truy cập nội dung của iframe bằng jQuery? Tôi đã thử làm điều này, nhưng nó không hoạt động:

nội dung iframe: <div id="myContent"></div>

jQuery: $("#myiframe").find("#myContent")

Tôi có thể truy cập bằng cách myContentnào?

Tương tự như jquery / javascript: truy cập nội dung của iframe nhưng câu trả lời được chấp nhận không phải là thứ tôi đang tìm kiếm.

jquery iframe

— mbillard
nguồn

Tôi chỉ thấy rằng biến $ tích hợp trong bảng điều khiển Firefox trông không giống như một jQuery hoàn chỉnh chút nào. (Tôi đã tìm ra điều này sau khi nhận ra rằng tôi cũng không có biến jQuery, sau đó nhận ra rằng tôi đã không tải mã nguồn của jQuery).

— lươn ghEEz

Câu trả lời:

214

Bạn phải sử dụng contents()phương pháp:

$("#myiframe").contents().find("#myContent")

Nguồn: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Tài liệu API: https://api.jquery.com/contents/

— mbillard
nguồn

cho tôi lỗi: Lỗi: Permission denied để sở hữu truy cập 'ownerDocument'

— Imran Khan

ime: Nó có thể gây ra lỗi cho bạn vì những lý do sau: 1) Iframe không thuộc cùng một miền. 2) Bạn đang cố đọc nó trước sự kiện tải Iframe.

— iMatoria

Có cách nào để xác minh xem nội dung iframe đến từ cùng một miền hay không, trước khi cố gắng truy cập và gặp lỗi?

— Kamafeather

Url nguồn bị hỏng.

— karthzDIGI

@jperezmartin: Bạn sẽ phải sử dụng một số thư viện javascript để chuyển thông tin giữa trang chính và iframe. Về cơ bản, nó đã bị trình duyệt từ chối vì chức năng Trình duyệt chéo. Tôi xin lỗi, tôi không biết bất kỳ thư viện nào như vậy vì tôi chưa bao giờ yêu cầu nó.

— iMatoria

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>

— andres descalzo
nguồn

Nếu nguồn của iframe là miền bên ngoài, trình duyệt sẽ ẩn nội dung iframe (Chính sách nguồn gốc giống nhau). Một giải pháp khác là lưu nội dung bên ngoài trong một tệp, ví dụ: (trong PHP):

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

sau đó, lấy nội dung tệp mới (chuỗi) và phân tích cú pháp nó thành html, ví dụ (trong jquery):

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');

— fireb86
nguồn