Nhận HTML bên trong khung nội tuyến bằng cách sử dụng jQuery

Đây là tình huống của tôi.Nhận HTML bên trong khung nội tuyến bằng cách sử dụng jQuery

Tôi có tệp có tên iframe.html, chứa mã để chiếu hình ảnh. Mã có phần giống như

<html> 
    <head> 
    <!-- Have added title and js files (jquery, slideshow.js) etc. --> 
    </head> 

    <body> 
    <!-- Contains the images which are rendered as slidehow. --> 
    <!-- have hierarchy like 'div' inside 'div' etc. --> 
    </body> 
</html>

Người dùng có thể sử dụng mã nhúng để thêm trình chiếu vào blog hoặc trang web của họ (có thể từ các tên miền khác nhau). Hãy nói rằng người dùng có để nhúng slideshow trong index.html, họ có thể thêm bằng cách thêm dòng sau:

<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>

này sẽ mang mã nhúng HTML hoàn hảo từ iframe.html để index.html, bây giờ tôi cần một cách để truy cập vào các yếu tố trong iframe để điều chỉnh một số thuộc tính của chúng.

Giống như trong mã chiều rộng và chiều cao của iframe được người dùng đặt cho một số thứ nguyên sửa. Tôi muốn điều chỉnh kích thước của trình chiếu (và hình ảnh chứa) thành kích thước của vùng chứa iframe. Cách tốt nhất để làm việc này là gì?

Tôi cố gắng không thành công để truy cập các thành phần iframe từ index.html bởi một cái gì đó giống như

$('#iframe').contents();

nhưng nhận được lỗi:

TypeError: Cannot call method 'contents' of null

Vì vậy, tôi nghĩ rằng để thực hiện các logic trong iframe.html nơi trình chiếu nên kiểm tra chiều rộng và chiều cao của bố mẹ và đặt chiều cao tương ứng.

Tôi khá bối rối, hy vọng câu hỏi của tôi có ý nghĩa với hầu hết. Xin vui lòng yêu cầu giải thích thêm. Trợ giúp của bạn được đánh giá cao.

Nguồn

2013-04-19 Ajit S

Có thể vấn đề mà có thể nhìn thấy trong mô tả của bạn là bạn thêm 'jQuery.js' trong 'iframe.html' và không' index.html' nhưng viết mã trong' index. html' –

@ Knaģis Tôi đã thêm tệp 'jQuery.js' vào' iframe.html' và không phải 'index.html' –

Nếu' index.html' không có tham chiếu đến 'jquery.js' bạn có thể ' t sử dụng '$()' cú pháp trong các kịch bản có (tham chiếu JavaScript được phân tách thành cửa sổ/khung). –

Dòng này sẽ truy xuất toàn bộ mã HTML của khung. Bằng cách sử dụng các phương thức khác thay vì innerHTML, bạn có thể duyệt DOM của tài liệu bên trong.

document.getElementById('iframe').contentWindow.document.body.innerHTML

Điều cần ghi nhớ là thao tác này chỉ hoạt động nếu nguồn khung nằm trên cùng một tên miền. Nếu nó là từ một tên miền khác nhau, cross-site-scripting (XSS) bảo vệ sẽ kick vào

Nguồn

2013-04-19 11:22:26

Cảm ơn bạn. Khung nội tuyến nằm trên cùng một miền. Đoạn mã trên trả về 'undefined'. –

bạn đang sử dụng trình duyệt và phiên bản nào? –

Tôi cũng đã mắc lỗi trong tập lệnh - 'document.innerHTML' trống, trong khi' document.body.innerHTML' thì không. –

var iframe = document.getElementById('iframe'); 
    $(iframe).contents().find("html").html();

Nguồn

2013-04-19 11:22:17 Dolo

Hãy thử mã này:.

$('#iframe').contents().find("html").html();

này sẽ trả lại tất cả các html trong iframe của bạn. Thay vì .find("html") bạn có thể sử dụng bất kỳ công cụ chọn nào bạn muốn, ví dụ: .find('body'), .find('div#mydiv').

Nguồn

2013-04-19 11:23:44

Chỉ cần một lưu ý, điều này sẽ không hoạt động nếu tài liệu iframe được lưu trữ trên tên miền khác hoặc cùng một miền nhưng số cổng khác nhau. – K48

Nếu bạn có Div như sau trong một khung nội tuyến

<iframe id="ifrmReportViewer" name="ifrmReportViewer" frameborder="0" width="980" 

    <div id="EndLetterSequenceNoToShow" runat="server"> 11441551 </div> Or 

    <form id="form1" runat="server">   
     <div style="clear: both; width: 998px; margin: 0 auto;" id="divInnerForm">   

      Some Text 

     </div> 
    </form> 
</iframe>

Sau đó, bạn có thể tìm thấy nội dung của những Div sử dụng đoạn mã sau

var iContentBody = $("#ifrmReportViewer").contents().find("body"); 
var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text(); 

var divInnerFormText = iContentBody.find("#divInnerForm").text();

Tôi hy vọng điều này sẽ giúp một ai đó.

Nguồn

2013-11-26 06:31:51

Chỉ vì mục đích tham khảo. Đây là cách để làm điều đó với JQuery (hữu ích ví dụ như khi bạn không thể truy vấn bởi id phần tử):

$('#iframe').get(0).contentWindow.document.body.innerHTML

Nguồn

2014-12-02 00:06:11 mxro

$(editFrame).contents().find("html").html();

Nguồn

2014-12-06 06:04:57

Đây có thể là một giải pháp khác nếu jquery được nạp trong iframe.html.

$('#iframe')[0].contentWindow.$("html").html()

Nguồn

2014-12-16 05:55:23 toshi

-1

$('#iframe').load(function() { 
    var src = $('#iframe').contents().find("html").html(); 
    alert(src); 
});

Nguồn

2015-02-25 09:30:05 akash

vui lòng thêm mô tả: tại sao điều này sẽ hữu ích? – zohar

này làm việc cho tôi bởi vì nó hoạt động tốt trong IE8.

$('#iframe').contents().find("html").html();

nhưng nếu bạn muốn sử dụng javascript dành cho jquery bạn có thể sử dụng như thế này

var iframe = document.getElementById('iframecontent'); 
var innerDoc = iframe.contentDocument || iframe.contentWindow.document; 
var val_1 = innerDoc.getElementById('value_1').value;

Nguồn

2015-07-23 06:27:05 Hermes

Tại sao không thử Ajax, kiểm tra mã phần 1 hoặc phần 2 (sử dụng bình luận).

$(document).ready(function(){ 
 
\t console.clear(); 
 
/* 
 
    // PART 1 ERROR 
 
    // Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null". Both frames are sandboxed and lack the "allow-same-origin" flag. 
 
\t console.log("PART 1:: "); 
 
\t console.log($('iframe#sandro').contents().find("html").html()); 
 
*/ 
 
\t // PART 2 
 
\t $.ajax({ 
 
\t \t url: $("iframe#sandro").attr("src"), 
 
\t \t type: 'GET', 
 
\t \t dataType: 'html' 
 
\t }).done(function(html) { 
 
\t \t console.log("PART 2:: "); 
 
\t \t console.log(html); 
 
\t }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<iframe id="sandro" src="https://jsfiddle.net/robots.txt"></iframe> 
 
</body> 
 
</html>

Nguồn

2016-02-15 11:38:44 KingRider

Cách tiếp cận bất thường nhưng tốt! –

Nhận HTML bên trong khung nội tuyến bằng cách sử dụng jQuery

Trả lời

Các vấn đề liên quan