Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Focus IFRAME when link is clicked

Posted on 2004-08-21
10
Medium Priority
?
1,434 Views
Last Modified: 2010-05-18
       Hello.

        I need the following iframe to be focused:


document.writeln('<iframe onfocus="alert(\'focused\')" onblur="alert(\'blurred\')"     id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');

        whenever the following is clicked:

document.writeln('<div id="table_' + rte + '"><a href=# width="200" height="24"title="Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div>');



Here is the rest of the code,
Thanks!

----------------------------------------------------

<html>
<head>
<script language="JavaScript" type="text/javascript">

var isRichText = false;
var rng;
var currentRTE;
var allRTEs = "";

function tableDialog(){
alert("Create Table button pressed");
}

function initRTE(imgPath, incPath, css) {
     //set browser vars
     var ua = navigator.userAgent.toLowerCase();
     isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1));
     isGecko = (ua.indexOf("gecko") != -1);
     isSafari = (ua.indexOf("safari") != -1);
     isKonqueror = (ua.indexOf("konqueror") != -1);
     
     //check to see if designMode mode is available
     if (document.getElementById && document.designMode && !isSafari && !isKonqueror) {
          isRichText = true;
     }
     
     if (!isIE) document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEDOWN | Event.MOUSEUP);
     document.onmouseover = raiseButton;
     document.onmouseout  = normalButton;
     document.onmousedown = lowerButton;
     document.onmouseup   = raiseButton;
     
     //set paths vars
     imagesPath = imgPath;
     includesPath = incPath;
     cssFile = css;
     
     if (isRichText) document.writeln('<style type="text/css">@import "' + includesPath + 'rte.css";</style>');
}

function writeRichText(rte, html, width, height, buttons, readOnly) {
     if (isRichText) {
          if (allRTEs.length > 0) allRTEs += ";";
          allRTEs += rte;
          writeRTE(rte, html, width, height, buttons, readOnly);
     } else {
          writeDefault(rte, html, width, height, buttons, readOnly);
     }
}

function writeDefault(rte, html, width, height, buttons, readOnly) {
     if (!readOnly) {
          document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;">' + html + '</textarea>');
     } else {
          document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;" readonly>' + html + '</textarea>');
     }
}

function writeRTE(rte, html, width, height, buttons, readOnly) {
     if (readOnly) buttons = false;
     
     if (isIE) {
          if (buttons && (width < 600)) width = 600;
          var tablewidth = width;
     } else {
          if (buttons && (width < 500)) width = 500;
          var tablewidth = width + 4;
     }
     
     if (buttons == true) {
          document.writeln('<div id="table_' + rte + '"><a href=# width="200" height="24"title="Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div>');
     }
     document.writeln('<iframe onfocus="alert(\'focused\')" onblur="alert(\'blurred\')"     id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');
     document.writeln('<input type="hidden" id="hdn' + rte + '" name="' + rte + '" value="">');
     document.getElementById('hdn' + rte).value = html;
     enableDesignMode(rte, html, readOnly);
}

function enableDesignMode(rte, html, readOnly) {
     var frameHtml = "<html id=\"" + rte + "\">\n";
     frameHtml += "<head>\n";
     //to reference your stylesheet, set href property below to your stylesheet path and uncomment
     if (cssFile.length > 0) {
          frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
     } else {
          frameHtml += "<style>\n";
          frameHtml += "body {\n";
          frameHtml += "     background: #FFFFFF;\n";
          frameHtml += "     margin: 0px;\n";
          frameHtml += "     padding: 0px;\n";
          frameHtml += "}\n";
          frameHtml += "</style>\n";
     }
     frameHtml += "</head>\n";
     frameHtml += "<body>\n";
     frameHtml += html + "\n";
     frameHtml += "</body>\n";
     frameHtml += "</html>";
     
     if (document.all) {
          var oRTE = frames[rte].document;
          oRTE.open();
          oRTE.write(frameHtml);
          oRTE.close();
          if (!readOnly) oRTE.designMode = "On";
     } else {
          try {
               if (!readOnly) document.getElementById(rte).contentDocument.designMode = "on";
               try {
                    var oRTE = document.getElementById(rte).contentWindow.document;
                    oRTE.open();
                    oRTE.write(frameHtml);
                    oRTE.close();
                    if (isGecko && !readOnly) {
                         //attach a keyboard handler for gecko browsers to make keyboard shortcuts work
                         oRTE.addEventListener("keypress", kb_handler, true);
                    }
               } catch (e) {
                    alert("Error preloading content.");
               }
          } catch (e) {
               //gecko may take some time to enable design mode.
               //Keep looping until able to set.
               if (isGecko) {
                    setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10);
               } else {
                    return false;
               }
          }
     }
}

</script>
</head>
<body>
<table><tr><td><form>
                                        <script language="JavaScript" type="text/javascript">
                                        <!--\n";
                                        function submitForm() {
                                        updateRTE('rte1');
                                        return true;
                                        }
                                        initRTE("rte/images/", "rte/", "rte/");
                                        //-->
                                        </script>
                                        <noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
                                        <script language="JavaScript" type="text/javascript">
                                        <!--
                                        writeRichText('rte1', '', 400, 200, true, false);
                                        //-->
                                        </script>
                                   </td>
                         </form>
</tr></table>
</body>
</html>
0
Comment
Question by:hankknight
  • 5
  • 3
  • 2
10 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11862118
Hi

Err... you mean like this:?

document.writeln('<div id="table_' + rte + '" onclick="focusEle(\'"+rte+"\');"><a href=# width="200" height="24" title="Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div>');

and then have this function:

function focusEle(el) {
   var obj = (document.getElementById) ? document.getElementById(el) : (document.all) ? document.all[el] : document.layers[el];
   obj.focus();
   return true;
}

Regards,
Zyloch
0
 
LVL 16

Author Comment

by:hankknight
ID: 11862182
Thanks, but it still isn't focusing when I click the button.  

Here is the code, updated with your idea:

<html>
<head>
<script language="JavaScript" type="text/javascript">

var isRichText = false;
var rng;
var currentRTE;
var allRTEs = "";

function tableDialog(){
alert("Create Table button pressed");
}

function initRTE(imgPath, incPath, css) {
     //set browser vars
     var ua = navigator.userAgent.toLowerCase();
     isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1));
     isGecko = (ua.indexOf("gecko") != -1);
     isSafari = (ua.indexOf("safari") != -1);
     isKonqueror = (ua.indexOf("konqueror") != -1);
     
     //check to see if designMode mode is available
     if (document.getElementById && document.designMode && !isSafari && !isKonqueror) {
          isRichText = true;
     }
     
     if (!isIE) document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEDOWN | Event.MOUSEUP);
     document.onmouseover = raiseButton;
     document.onmouseout  = normalButton;
     document.onmousedown = lowerButton;
     document.onmouseup   = raiseButton;
     
     //set paths vars
     imagesPath = imgPath;
     includesPath = incPath;
     cssFile = css;
     
     if (isRichText) document.writeln('<style type="text/css">@import "' + includesPath + 'rte.css";</style>');
}

function focusEle(el) {
   var obj = (document.getElementById) ? document.getElementById(el) : (document.all) ? document.all[el] : document.layers[el];
   obj.focus();
   return true;
}


function writeRichText(rte, html, width, height, buttons, readOnly) {
     if (isRichText) {
          if (allRTEs.length > 0) allRTEs += ";";
          allRTEs += rte;
          writeRTE(rte, html, width, height, buttons, readOnly);
     } else {
          writeDefault(rte, html, width, height, buttons, readOnly);
     }
}

function writeDefault(rte, html, width, height, buttons, readOnly) {
     if (!readOnly) {
          document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;">' + html + '</textarea>');
     } else {
          document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;" readonly>' + html + '</textarea>');
     }
}

function writeRTE(rte, html, width, height, buttons, readOnly) {
     if (readOnly) buttons = false;
     
     if (isIE) {
          if (buttons && (width < 600)) width = 600;
          var tablewidth = width;
     } else {
          if (buttons && (width < 500)) width = 500;
          var tablewidth = width + 4;
     }
     

     if (buttons == true) {

      document.writeln('<div id="table_' + rte + '" onclick="focusEle(\'"+rte+"\');"><a href=# width="200" height="24" title="2Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div>');

     }
     document.writeln('<iframe onfocus="alert(\'focused\')" onblur="alert(\'blurred\')"     id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');
     document.writeln('<input type="hidden" id="hdn' + rte + '" name="' + rte + '" value="">');
     document.getElementById('hdn' + rte).value = html;
     enableDesignMode(rte, html, readOnly);
}

function enableDesignMode(rte, html, readOnly) {
     var frameHtml = "<html id=\"" + rte + "\">\n";
     frameHtml += "<head>\n";
     //to reference your stylesheet, set href property below to your stylesheet path and uncomment
     if (cssFile.length > 0) {
          frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
     } else {
          frameHtml += "<style>\n";
          frameHtml += "body {\n";
          frameHtml += "     background: #FFFFFF;\n";
          frameHtml += "     margin: 0px;\n";
          frameHtml += "     padding: 0px;\n";
          frameHtml += "}\n";
          frameHtml += "</style>\n";
     }
     frameHtml += "</head>\n";
     frameHtml += "<body>\n";
     frameHtml += html + "\n";
     frameHtml += "</body>\n";
     frameHtml += "</html>";
     
     if (document.all) {
          var oRTE = frames[rte].document;
          oRTE.open();
          oRTE.write(frameHtml);
          oRTE.close();
          if (!readOnly) oRTE.designMode = "On";
     } else {
          try {
               if (!readOnly) document.getElementById(rte).contentDocument.designMode = "on";
               try {
                    var oRTE = document.getElementById(rte).contentWindow.document;
                    oRTE.open();
                    oRTE.write(frameHtml);
                    oRTE.close();
                    if (isGecko && !readOnly) {
                         //attach a keyboard handler for gecko browsers to make keyboard shortcuts work
                         oRTE.addEventListener("keypress", kb_handler, true);
                    }
               } catch (e) {
                    alert("Error preloading content.");
               }
          } catch (e) {
               //gecko may take some time to enable design mode.
               //Keep looping until able to set.
               if (isGecko) {
                    setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10);
               } else {
                    return false;
               }
          }
     }
}

</script>
</head>
<body>
<table><tr><td><form>
                                        <script language="JavaScript" type="text/javascript">
                                        <!--\n";
                                        function submitForm() {
                                        updateRTE('rte1');
                                        return true;
                                        }
                                        initRTE("rte/images/", "rte/", "rte/");
                                        //-->
                                        </script>
                                        <noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
                                        <script language="JavaScript" type="text/javascript">
                                        <!--
                                        writeRichText('rte1', '', 400, 200, true, false);
                                        //-->
                                        </script>
                                   </td>
                         </form>
</tr></table>
</body>
</html>
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 1200 total points
ID: 11862199
My proposal is this:

var iFrameName = "rte1";
function tableDialog(){
  alert("Create Table button pressed");
  window.frames[iFrameName].focus();
}


0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 36

Expert Comment

by:Zyloch
ID: 11862205
Try moving the focusEle(\'"+rte+"\'); to before the createTable function inside the <a> tag like this:

<a href="#" onclick="focusEle(\'' + rte + '\');tableDialog(\'' + rte + '\'); return false;"
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11862228
My proposal can be reduced to this:


function tableDialog(iFrameName){
  alert("Create Table button pressed");
  window.frames[iFrameName].focus();
}

0
 
LVL 16

Author Comment

by:hankknight
ID: 11862269
Thanks, Zyloch, but it doesn't seem to be working.

Zvonko, your proposal looks like it should work:

function tableDialog(iFrameName){
  alert("Create Table button pressed");
  window.frames[iFrameName].focus();
}

How can I make it work where the name of the iframe is set by this?

document.writeln('<iframe onfocus="alert(\'focused\')" onblur="alert(\'blurred\')"     id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');

I don't know the IFrame Name, so I don't know what to put for

  window.frames[iFrameName].focus();


I tried

  window.frames['+ RTE +'].focus();

But that didn't work.

Thanks!
0
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 800 total points
ID: 11862279
For Zvonko's you forgot the quotes like this:

window.frames[\'' + rte + '\'].focus();
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11862283
The iFrameName is a parameter in tableDialog() function header.
The correct iframe names is passed by the anchor click here:
);"><a href=# width="200" height="24" title="2Table" onClick="tableDialog(\'' + rte + '\');

So you have not to care.

The actual iframe name in your upper complete source is: rte1

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11862304
Perhaps it was not clear.
The complette function looks without changes like this:


function tableDialog(iFrameName){
 alert("Create Table button pressed");
 window.frames[iFrameName].focus();
}


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11865462
Only to avoid confusion: Following line has no mean in my function:
window.frames[\'' + rte + '\'].focus();

Thanks for points.

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question