使用頁面.css文件將CSS添加到iframe元素

-3

首先，似乎有很多具有相同類型標題的帖子，但沒有一個關注我正面臨的問題。這就是爲什麼我打開這個新問題的原因，我希望標題足夠明確。使用頁面.css文件將CSS添加到iframe元素

我正在自己的文本編輯器上工作，起初我使用的是<textarea>，但我想爲我寫的元素添加各種樣式。在閱讀了很多關於它的主題之後，我決定將<textarea>更改爲。

在嘗試任何新的設計或任何東西之前，我希望在此和我以前的<textarea>具有相同的行爲。但我現在面臨一個問題：

我元素是在一個頁面，的index.html，這是一個CSS文件鏈接，的style.css。我能夠改變style.css框架的全局設計（如寬度，高度，邊框...），但是我不能在的元素中添加特殊設計，屬性爲I添加在我的style.css中。

我在iframe中有任何標記

但是即使我想這個奇怪的標籤添加到CSS的樣式不應用於我想改變的元素之前#document檢查員看到。

所以爲了簡潔起見，我的問題是這樣的：是否可以在主頁面的樣式表文件中的iframe中添加一些樣式？

以下是我的代碼的一些相關部分，它顯示了我想要執行的操作：向中的<p>標記添加自定義字體。從父

window.onload = function() { var frameElement = document.getElementById("text-field"); var doc = frameElement.contentDocument; doc.body.contentEditable = true; }

html, body { \t margin : 0px; \t background : #f5f5f5; \t font-family: 'Roboto', sans-serif; } input:focus, textarea:focus { \t outline: none; } .text-editor { \t min-width : 800px; \t width : 1200px; \t \t max-width : 1600px; \t min-height : 400px; \t height : 850px; \t max-height : 850px; \t background : #f0f0f0; \t box-shadow : 0px 1px 4px #ccc; \t margin : auto; \t overflow:auto } .text-editor .text-field { \t display : block; \t background-color : white; \t min-height : 300px; \t height : 600px; \t max-height : 600px; \t width : 90%; \t margin : auto; \t padding : 5px; \t border: 1px solid #ccc; } .text-editor .text-field #document html body { \t font-family: 'Source Code Pro', monospace; \t font-size : 14px; }

<!DOCTYPE html> <html> \t <head> \t \t <title>A Text Editor Project</title> \t \t <link rel="stylesheet" type="text/css" href="CSS/style.css"> \t \t <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> \t \t <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"> \t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> \t </head> \t \t <body> \t \t \t \t <div class="text-editor"> \t \t \t <iframe class="text-field" id="text-field" src="about:blank" contenteditable="true"> \t \t \t \t \t \t </iframe> \t \t </div> \t \t </body> </html>

來源

2017-08-04 Louis ' LYRO' Dupont

相反iframe的你可以嘗試

– Sanil

@Foaster如果你試過你讀了第一個答案的評論，你會看到，這個解決方案是完全過時並且在HTML5中無效。 –

@Sanil由於各種原因，包括安全問題，我想使用iframe，因爲我閱讀了很多關於此主題的建議。 –

樣式將不會被施加到iframe中的文檔。最好的解決方案是將樣式表添加到iframe中的文檔中。通過javascript或創建一個模板頁面通過src加載。

喜歡的東西：

var head = doc.head 
    var link = doc.createElement('link') 
    link.type = 'text/css' 
    link.rel = 'stylesheet' 
    link.href = ...src... 
    head.appendChild(link)

在現有的JavaScript

。

我已經把一個小例子，有一個樣式塊here

來源

2017-08-04 11:15:02 hairmot

使用頁面.css文件將CSS添加到iframe元素

回答

相關問題