樣式對象的內容/嵌入

我正在開發一個小型web應用程序，其中我有一個用於顯示小文檔的object元素（包含embed）。樣式對象的內容/嵌入

這些文檔可以是以base64字符串形式從Web服務獲得的PDF或純文本文件（.txt）。然後，爲了顯示內容，我分別更新和embed的data和src屬性。最後的結果會是這個樣子（簡化）：

object { 
 
    border: 1px solid #ccc; 
 
    width: 300px; 
 
    height: 100px; 
 
}

<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh"> 
 
    <embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" /> 
 
</object>

所有PDF文件看行（瀏覽器使用插件加載它們），但我現在面臨一些麻煩與文本文件。 .txt的內容顯示正確，但文字看起來有點小，我被要求將它放大。

我試圖改變object和embed但內容的字體大小不會受到它的影響：

object, embed { 
    font-size: 32px; 
}

在Chrome中，我看到對象的內容是顯示內容的#document在pre的base64 .txt中。於是，我就在樣式pre，但只有object標籤外pre標籤帶他們，而不是一個裏面：

pre { 
    font-size: 32px; 
}

是否有可能給樣式的object/embed的內容？它怎麼能做到？

來源

2017-10-11 Alvaro Montoro

pre上的樣式不適用，因爲您可能會注意到您的對象的行爲與iframe相同。所以你的風格不會達到它。 –

這裏是一個僞解決方案在Firefox（本地），而不是鉻爲我工作。這個想法是訪問對象的內容並在其頭部添加一個自定義CSS。此解決方案的問題在於，您將在某些瀏覽器中面臨交叉源問題，因爲對象的行爲與包含外部內容的iframe相似。

NB：我用的setTimeout對象的內容加載

function addCss() { 
 
\t $('object').contents().find("head").append($("<style type='text/css'>pre{font-size:32px;}</style>")); 
 
} 
 

 
setTimeout(function(){addCss()},2000);

object { 
 
    border: 1px solid #ccc; 
 
    width: 300px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh"> 
 
    <embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" /> 
 
</object>

後，以確保我運行的功能，也許您的問題將是如何避免這種跨 - 原因問題，因爲內容將來自同一網站的你和服務器。

來源

2017-10-11 23:10:09

樣式對象的內容/嵌入

回答

相關問題