Question

我想在我的博客中包含一个Iframe，问题是我的背景是黑色的，iframe中的文字颜色也是如此。

无论如何，我可以在不访问原始内容的情况下更改iframe文本的颜色吗？

Answer 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>

Answer 2

简短的回答是：不，如果您无法控制源页面，则无法控制样式。

仅使用CSS是不可能的。您基本上需要控制iframe内容才能设置样式。有些方法可以使用javascript或您选择的Web语言动态插入一些所需的样式，但您需要直接控制iframe内容。

假设页面与您的博客位于同一服务器上，您可以使用jQuery控制样式，例如，动态设置页面样式。但是，javascript（以及jQuery）受same origin policy的约束，如果iframe的源与您显示的域不同，则无法操作iframe的内容。

如果您的源页面位于外部服务器上，另一种方法可能是创建您自己的PHP“小部件”，它可以加载外部网页并使用file_get_contents然后将其作为iframe加载，或者使用{ {3}}，只要此脚本/窗口小部件与您的博客存在于同一个域中，您就可以根据自己的内容设置和控制该页面的内容。

Answer 3

这是一个非常简短而可爱的小编辑器，我使用了几个演示和教程，创建了iframe并将iframe加载到body标签中，然后使用了颜色输入获取并查询我的颜色，然后将其添加到下面的iframe中是我所做的一小部分示例。

function iFrameOn(){
richTextField.document.designMode = 'On';
}
var colorWell;
var defaultColor = "#000000";

window.addEventListener("load", startup, false);
function startup() {
colorWell = document.querySelector("#myColor");
colorWell.value = defaultColor;
colorWell.addEventListener("input", updateFirst, false);
colorWell.select();
}
function updateFirst(event) {
richTextField.document.execCommand('ForeColor',false,event.target.value);

 }

 <form action="" method="POST" name="myform" id="myform">
 <input type="color" id="myColor" style="width:36px; height:36px;">
 <!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
 <textarea style="display:none; width:100%; min-height:100px;" name="myTextArea" 
 id="myTextArea"></textarea>
 <iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; 
 width:100%; min-height:100px;"></iframe>
 <!-- End replacing your normal textarea -->
                <button type="button" onClick="javascript:submit_form();">Save About 
  Info</button>



  </form>

更改Iframe中的文本颜色

3 个答案: