asked on

Focus IFRAME when link is clicked

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

</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
<script language="JavaScript" type="text/javascript">

</script>
</td>
</form>
</tr></table>
</body>
</html>

Zyloch

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

hankknight

ASKER

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

</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
<script language="JavaScript" type="text/javascript">

</script>
</td>
</form>
</tr></table>
</body>
</html>

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zyloch

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

Zvonko

My proposal can be reduced to this:

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

hankknight

ASKER

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!

SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zvonko

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

Zvonko

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();
}

Zvonko

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

Thanks for points.