2011-02-02 230 views
1

我想在我的博客中包含Iframe,問題是我的背景是黑色,iframe中的文本顏色也是如此。更改Iframe中的文本顏色

無論如何,我可以改變iframe文本的顏色而無需訪問原始內容?

回答

1
<html> 
<head> 
    <script type="text/javascript"> 
     function InitEditable() 
{ 

       var editor = document.getElementById ("editor"); 

      var editorDoc = editor.contentWindow.document;   
      var editorBody = editorDoc.body; 

       // turn off spellcheck 


      if (editorBody.contentEditable === undefined) { // Firefox earlier than version 3 
       if (editorDoc.designMode !== undefined) { 
         // turn on designMode 
        editorDoc.designMode = "on";     
       } 
      } 
      else { 
        // allow contentEditable 
       editorBody.contentEditable = true; 
      } 

     } 





     function ToggleBold() 
    { 
      editorDoc.execCommand ('bold', false, null); 
     } 
     function ToggleItalic() 
    { 
      editorDoc.execCommand ('italic', false, null); 
     } 
     function SetRed() { 
     //sets foreground color 
      editorDoc.execCommand ('foreColor', false, "#ff0000"); 
     } 
     function Delete() { 
      editorDoc.execCommand ('delete', false, null); 
     } 
    </script> 
</head> 
<body onload="InitEditable();"> 
    First, write and select some text in the editor. 
    <br /> 
    <iframe id="editor" src="F:\EXAMPLE\JAVA\FILE\SURESHMNG.txt"></iframe> 
    <input type="textarea" id="ta"></textarea> 
    <br /><br /> 
    You can use the following buttons to change the appearance of the selected text: 
    <br /><br /> 
    <button onclick="ToggleBold();">Bold</button> 
    <button onclick="ToggleItalic();">Italic</button> 
    <button onclick="SetRed();">Set to red</button> 
    <button onclick="Delete();">Delete</button> 
</body> 
</html> 
0

簡短的回答是:不,如果您無法控制源頁面,則無法控制樣式。

這不可能只使用CSS。您基本上需要對iframe內容進行控制,以便對其進行設計。有些方法使用JavaScript或您選擇的Web語言動態插入一些需要的樣式,但您需要直接控制iframe內容。

假設頁面與您的博客位於同一個服務器上,您可以使用jQuery控制樣式,例如動態設置頁面樣式。然而,javascript(以及jQuery)受制於same origin policy,如果iframe的來源與您所顯示的域名不同,則無法操作iframe的內容。

如果你的源頁面住外部服務器上,另一種可能是創建自己的PHP「小工具」,它可以,或者通過使用jQuery.load加載外部網頁,並使用file_get_contents然後加載作爲一個iframe,在這隻要這個腳本/小部件與您的博客存在於同一個域中,您就可以根據您的內容設置和控制該頁面的內容。