Solved

Focus IFRAME when link is clicked

Posted on 2004-08-21
10
1,429 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 300 total points
ID: 11862199
My proposal is this:

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


0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

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

Independent Software Vendors: 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

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

710 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