Google Documents iFrame: Làm thế nào để tùy chỉnh css của một nhúng Google Documents iFrame

Question

tôi có mã này của một iframe hiển thị một tài liệu google tài liệu:

<div itemprop="description" class="col-xs-12 no-h-padding" id="article_desc" style="margin:0 auto; width:90%; float:none;"> 

    <iframe src="https://docs.google.com/viewer?url=http://example.com/docs/1.pdf&hl=ar&embedded=true" scrolling="no"></iframe> 

</div> 

Các iFrame hoạt động tuyệt vời và hiển thị iFrame sau:

Bây giờ tôi muốn thay đổi nền màu xám như đã thấy trong hình ở trên thành màu nền trắng, tôi đã tìm kiếm giải pháp và tôi đi lên với this, nhưng nó không hoạt động, nền chuyển sang màu trắng (với css tùy chỉnh của tôi) nhưng tài liệu google không hoạt động và nó hiển thị thông báo tôi "đã xảy ra sự cố" bên trong iFrame.

Có ai biết làm thế nào tôi có thể thay đổi màu nền xám?

EDIT Nó hoạt động trên Google Chrome và Opera nhưng không hoạt động trên Firefox và Safari.

Answer 1

Tôi không thể chắc chắn rằng đây có phải là vấn đề hay không, nhưng vì nó xuất hiện khác nhau trong các trình duyệt khác nhau, tôi có xu hướng tin rằng đó là vấn đề bình thường hóa/đặt lại CSS. This answer có một kịch bản để làm điều đó, và một số khác có trong các ý kiến, vì vậy tôi khuyên bạn nên kiểm tra nó ra.

Answer 2

điểm sau có thể được ghi nhận trong kịch bản này về styling iframe:

1. Bạn không thể tạo kiểu các iframe nạp từ một tên miền (tên miền chéo).
2. Một công việc xung quanh là chỉ để tạo kiểu cho khối iframe (Không phải nội dung khung nội tuyến) bằng cách cung cấp CSS nội tuyến cho thẻ iframe được sử dụng.
3. Bạn có thể tìm cách hack nội dung bằng cách tìm nạp nội dung trong miền/máy chủ của bạn và sau đó phân phối iframe từ đó để làm cho nó từ cùng một tên miền và do đó có thể tạo kiểu bằng cách sử dụng CSS và javascript thông thường.

liên kết sau có thêm chi tiết và các ví dụ kịch bản mà có thể được sử dụng trong tình huống này: How to apply CSS to iframe?