2012-09-02 34 views
10

Tôi đã tự hỏi nếu iframe HTML có thể kế thừa dữ liệu CSS từ cha mẹ của họ:thể HTML iframe kế thừa css và javascript dữ liệu

Main.html

<html> 
    <head> 
    <style> 
    .highlight{ 
     background: #008fcc; 
     } 
    </style> 
    </head> 
<body> 
    <iframe src='frame.html'></iframe> 
</body> 
</html> 

frame.html

hello <font class='highlight'> 
+1

Không, họ không thể. Tuy nhiên phép thuật có thể xảy ra trong <= IE7 – Peter

+16

Không phép thuật nào có thể xảy ra trong IE ... chỉ nguyền rủa. – Will

Trả lời

11

Câu trả lời ngắn: Không, iframe s tổng quát không thể kế thừa/truy cập kiểu/tập lệnh s từ trang gốc của họ.

Long trả lời: Bạn không thể thay đổi bất cứ điều gì trong phong cách hoặc thực thi các kịch bản bên trong một iframenếu nó đến từ tên miền khác (thậm chí bạn không thể đọc được nội dung DOM của nó thông qua JavaScript).

Mặt khác, nếu nó đến từ cùng một tên miền với trang mẹ, bạn có thể thay đổi kiểu phần tử hoặc thực thi tập lệnh bằng cách thực hiện điều gì đó tương tự trong trang mẹ của bạn (ví dụ này sử dụng jQuery, nhưng nó có thể được viết bằng đồng bằng JavaScript):

$("#iframe_id").contents().find("#some_div").css({color: "rgb(0, 162, 232)"}); //changed style of a div inside the iframe 

Để thực hiện một chức năng được xác định bên trong iframe:

$("#iframe_id").contents().document.functionName(functionParams); 

Hy vọng rằng sẽ giúp!

4

Bạn có thể nhận được thông số này với tham số boolean liền mạch liền mạch trên iframe.

https://developer.mozilla.org/en-US/docs/HTML/Element/iframe

Nhưng hiện nay nó không được thực hiện đầy đủ trong bất kỳ trình duyệt hiện đại.

Giải pháp đơn giản hơn là đặt tất cả CSS của bạn vào một tệp riêng biệt và đưa nó vào cả trang chính và trong trang iframed.

+1

Thông số này hiện đã bị xóa http://www.w3schools.com/tags/att_iframe_seamless.asp –

+0

lý do tại sao trên trái đất!?!?! Điều này thật điên rồ. Không có lý do cho các kịch bản Ajax được yêu cầu cho một cái gì đó đơn giản này. Nó làm cho nó không thể làm cho các trang web không js. –