Chọn một phần tử trong iFrame jQuery

122

Trong ứng dụng của mình, chúng tôi phân tích cú pháp một trang web và tải nó vào một trang khác trong iFrame. Tất cả các phần tử trong trang được tải đó đều có tokenid-s của chúng. Tôi cần chọn các phần tử bằng các tokenid-s đó. Có nghĩa là - Tôi nhấp vào một phần tử trên trang chính và chọn phần tử tương ứng trong trang trong iFrame. Với sự trợ giúp của jQuery, tôi thực hiện theo cách sau:

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

Tuy nhiên với chức năng này, tôi chỉ có thể chọn các phần tử trong trang hiện tại, không phải trong iFrame. Ai đó có thể cho tôi biết làm cách nào tôi có thể chọn các phần tử trong iFrame đã tải không?

Cảm ơn.

javascript iframe getelementbyid

— cycero
nguồn

157

var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

Cũng lưu ý rằng nếu srciframe này trỏ đến một miền khác, vì lý do bảo mật, bạn sẽ không thể truy cập nội dung của iframe này bằng javascript.

— Darin Dimitrov
nguồn

8

Hãy nhớ rằng $ ('iframe') không trực tiếp trả về iframe. Bạn cần phải kéo nó ra khỏi mảng.

— McKayla

Cảm ơn vì sự sẵn lòng giúp đỡ. Nhưng điều này dường như không hiệu quả.

— cycero

3

@cycero, nó sẽ hoạt động. Bạn có đang tạo iframe này theo cách động không? Đừng quên rằng nếu bạn trỏ phần tử src của iframe này đến miền khác không phải của bạn vì lý do bảo mật, bạn không thể truy cập nội dung của nó.

— Darin Dimitrov

Tôi tải nó không phải từ một miền khác mà từ cùng một thư mục. Nội dung iFrame đang được tạo động và được lưu trữ dưới dạng tệp trên máy chủ. Sau đó, tệp đó đang được tải trong iFrame.

— cycero

@cycero, tôi đã cập nhật câu trả lời của mình. Hãy thử quaiframe.contents()

— Darin Dimitrov

52

Hãy xem bài đăng này: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

Đặt bộ chọn của bạn trong phương pháp tìm.

Tuy nhiên, điều này có thể không thực hiện được nếu iframe không đến từ máy chủ của bạn. Các bài viết khác nói về lỗi bị từ chối cho phép.

jQuery / JavaScript: truy cập nội dung của iframe

— Kevin Bowersox
nguồn

Điều đó hoạt động về mặt lấy HTML của phần tử, nhưng làm cách nào để thêm một lớp CSS vào phần tử đã chọn đó? $ ("# iframeDiv"). content (). find ("[tokenid =" + token + "]"). addClass ("border"); dường như không hoạt động.

— cycero

1

Bạn có nhận được bất kỳ sự cho phép nào bị từ chối lỗi không? Bạn có thể cho tôi html của iframe được không?

— Kevin Bowersox

Không, không có sự cho phép nào bị từ chối.

— cycero

20

khi tài liệu của bạn đã sẵn sàng điều đó không có nghĩa là iframe của bạn cũng đã sẵn sàng,
vì vậy bạn nên lắng nghe sự kiện tải iframe sau đó truy cập nội dung của bạn:

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});

— Alnamrouti giá vé
nguồn

-3

Nếu trường hợp đang truy cập IFrame thông qua bảng điều khiển, ví dụ: Chrome Dev Tools thì bạn có thể chỉ cần chọn ngữ cảnh của các yêu cầu DOM thông qua menu thả xuống (xem hình).

— tibersky
nguồn

-9

đây là JQuery đơn giản để làm điều này để làm cho div có thể kéo được với chỉ trong vùng chứa:

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );

— Rajasekharreddy Kadasani
nguồn