html – Changing the text colour in Iframe-ThrowExceptions

Exception or error:

I would like to include an Iframe in my blog, The problem is that my background is black and so is the text color in the iframe.

Anyway i can change the color of the iframe text without having access to the original content?

How to solve:
<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>

###

The short answer is: No, if you do not have control over the source page, you cannot control the styling.

It’s not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice to insert some needed styles dynamically, but you would need direct control over the iframe content.

Assuming the page lives on the same server as your blog, you can control the styling with jQuery, for example, to dynamically style the page. However javascript (and thus, jQuery) is subject to the same origin policy which makes it impossible to manipulate the content of the iframe if the source of the iframe is not the same domain as the one you are displaying it on.

If your source page lives on an outside server, an alternative might be to create your own PHP “widget” which can load an external web page and using file_get_contents then load that as an iframe, or by using jQuery.load, at which point as long as this script/widget existed on the same domain as your blog, you will be able to style and control the contents of that page to your heart’s content.

###

here is a very short and sweet little editor i used several demos and tutorials and i created the iframe and loaded the iframe in the body tag then i used the color input
to get and query my color then add it to the iframe below is a small sample of what i did.

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>

Leave a Reply

Your email address will not be published. Required fields are marked *