Sử dụng CSS để ảnh hưởng đến kiểu div bên trong iframe

Có thể thay đổi kiểu của một div nằm trong iframe trên trang chỉ bằng CSS không?

Bạn cần JavaScript. Nó giống như thực hiện nó trong trang mẹ, ngoại trừ bạn phải đặt tiền tố lệnh JavaScript của bạn với tên của iframe.

Hãy nhớ rằng, chính sách nguồn gốc tương tự được áp dụng, vì vậy bạn chỉ có thể thực hiện điều này với phần tử iframe đến từ máy chủ của riêng bạn.

Tôi sử dụng khung Prototype để làm cho nó dễ dàng hơn:

frame1.$('mydiv').style.border = '1px solid #000000'

hoặc là

frame1.$('mydiv').addClassName('withborder')

Tóm lại là không.

Bạn không thể áp dụng CSS cho HTML được tải trong iframe, trừ khi bạn có quyền kiểm soát trang được tải trong iframe do hạn chế tài nguyên tên miền chéo.

Đúng. Hãy xem chủ đề khác này để biết chi tiết: Làm thế nào để áp dụng CSS cho iframe?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 

Bạn có thể truy xuất nội dung của một iframeđầu tiên và sau đó sử dụng các jQuerybộ chọn chống lại chúng như bình thường.

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

Chúc may mắn!

Câu trả lời nhanh là: Không, xin lỗi.

Không thể chỉ sử dụng CSS. Về cơ bản, bạn cần có quyền kiểm soát nội dung iframe để tạo kiểu cho nó. Có các phương pháp sử dụng javascript hoặc ngôn ngữ web bạn chọn (mà tôi đã đọc một chút, nhưng không quen thuộc với bản thân) để chèn một số kiểu cần thiết một cách linh hoạt, nhưng bạn sẽ cần kiểm soát trực tiếp nội dung iframe mà nó nghe có vẻ như bạn không có

Sử dụng Jquery và đợi cho đến khi nguồn được tải, Đây là cách tôi đã đạt được (Đã sử dụng khoảng thời gian góc, bạn có thể sử dụng phương pháp javascript setInterval):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

có lẽ không phải là cách bạn đang nghĩ iframe cũng sẽ phải <link>trong tệp css. VÀ bạn không thể làm điều đó ngay cả với javascript nếu nó trên một tên miền khác.

Rõ ràng nó có thể được thực hiện thông qua jQuery:

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

https://stackoverflow.com/a/13959836/1625795

Một cách thức hoạt động của hack-ish giống như cách mà Eugene nói. Tôi đã kết thúc theo mã của anh ấy và liên kết với Css tùy chỉnh của tôi cho trang. Vấn đề đối với tôi là, với dòng thời gian twitter, bạn phải thực hiện một số bước tiến của twitter để ghi đè mã của họ thành smidgen. Bây giờ chúng ta có một dòng thời gian cuộn với css của chúng tôi, phông chữ IE Lớn hơn, chiều cao dòng thích hợp và làm cho thanh cuộn bị ẩn cho chiều cao lớn hơn giới hạn của chúng.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

Chỉ cần thêm điều này và tất cả hoạt động tốt:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Vâng, nó có thể mặc dù cồng kềnh. Bạn sẽ cần in / lặp lại HTML của trang vào phần thân của trang sau đó áp dụng chức năng thay đổi quy tắc CSS. Sử dụng các ví dụ tương tự được đưa ra ở trên, về cơ bản, bạn sẽ sử dụng phương pháp phân tích cú pháp tìm div trong trang, sau đó áp dụng CSS cho nó và sau đó in lại / lặp lại cho người dùng cuối. Tôi không cần điều này vì vậy tôi không muốn mã hóa chức năng đó vào mọi mục trong CSS của một trang web khác chỉ để aphtply.

Người giới thiệu:

• In nội dung của IFRAME
• Truy cập và in mã nguồn HTML bằng PHP hoặc JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Kết hợp các giải pháp khác nhau, đây là những gì làm việc cho tôi.

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

Không thể từ phía khách hàng. Một lỗi javascript sẽ được đưa ra "Lỗi: Quyền bị từ chối truy cập vào tài liệu" tài liệu "" vì Iframe không phải là một phần của tên miền của bạn. Giải pháp duy nhất là tìm nạp trang từ mã phía máy chủ và thay đổi CSS cần thiết.