iFrameのテキストの色を変更する

2011-02-02 html css iframe

ブログにiframeを含めたいのですが、問題は背景が黒で、iframeのテキストの色も黒であるということです。

とにかく、元のコンテンツにアクセスしなくてもiframeテキストの色を変更できますか?

Answers

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

短い答えは次のとおりです。いいえ、ソースページを制御できないと、スタイルを制御できません。

CSSだけでは不可能です。スタイルを設定するには、基本的にiframeコンテンツを制御する必要があります。必要なスタイルを動的に挿入するためにJavaScriptまたは選択したWeb言語を使用する方法がありますが、iframeコンテンツを直接制御する必要があります。

ページがブログと同じサーバー上にあると想定すると、たとえば、jQueryを使用してスタイルを制御して、ページを動的にスタイル設定できます。ただし、JavaScript(およびjQuery)は同じ生成元ポリシーの影響を受けるため、iframeのソースが表示しているドメインと同じドメインでない場合は、iframeのコンテンツを操作できません。

外部のサーバー上のソースページの命場合は、代替手段は外部のウェブページをロードして使用することができ、独自のPHP「ウィジェット」を作成するかもしれないのfile_get_contentsを 、次にIFRAMEとして、または使用して、そのロードjQuery.loadをとして、その時点で、このスクリプト/ウィジェットがブログと同じドメインに存在している限り、そのページのコンテンツを思いのままにスタイルおよび制御できます。

これは非常に短くて甘いエディタです。いくつかのデモとチュートリアルを使用し、iframeを作成してbodyタグにiframeをロードしてから、カラー入力を使用しました 私の色を取得してクエリし、それを下の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>

Related