jQuery Selector for IFRAME

Dear experts,

I need to select an iframe that is embedded in my document.
Since the iframe has no name and no id, I need to know how I can still select it by using its title attribute.

The iframe code is:

<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="WYSIWYG-Editor, P8_STR_BEARBEITUNG, drücken Sie ALT 0 für Hilfe." style="width:100%;height:100%">

Open in new window


I appreciate your help, since I am having continuous trouble when it comes to DOM and jQuery selectors.

Thanks in advance!
skahlert2010Asked:
Who is Participating?
 
Kusala WijayasenaSoftware EngineerCommented:
"iframeObj" is the returning IFrame object (length of an object is meaningless)

just try this and tell whether you are getting any output

var layoutTable = document.getElementById("apex_layout_12589647835525562");
var iframeObj = layoutTable.getElementsByTagName('iframe')[0];
alert(iframeObj.title);

Open in new window

-Kusala
0
 
basicinstinctCommented:
$('iframe[title^="WYSIWYG"]')
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
skahlert2010Author Commented:
Thanks guys!

I tried basicinstincts approach but receive the follwoing error in firebug:

uncaught exception: Syntax error, unrecognized expression: $('iframe[title^="WYSIWYG"]')

The iframes are no longer displayed on my page due to this error.

Unfortunately I couldn't use your information chaituu. I am a newbie to jQuery.
0
 
chaitu chaituCommented:
can you paste your HTML code?
0
 
basicinstinctCommented:
it returns a nodelist,
here's how to use it: http://jsfiddle.net/GFKCL/1/
0
 
skahlert2010Author Commented:
Here is my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" dir="ltr" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; overflow: hidden;">
<head>
<body id="delta-page-no-tabs-with-sidebar" onpageshow="event.persisted && (function(){var allInstances = CKEDITOR.instances, editor, doc;for ( var i in allInstances ){ editor = allInstances[ i ]; doc = editor.document; if ( doc ) { doc.$.designMode = "off"; doc.$.designMode = "on"; }}})();" role="application" style="overflow: hidden; position: relative; height: 100%; margin: 0px; padding: 0px; border: medium none;">
<form id="wwvFlowForm" enctype="multipart/form-data" name="wwv_flow" method="post" action="wwv_flow.accept">
<input id="pFlowId" type="hidden" value="102" name="p_flow_id">
<input id="pFlowStepId" type="hidden" value="1" name="p_flow_step_id">
<input id="pInstance" type="hidden" value="64362186552001" name="p_instance">
<input id="pPageSubmissionId" type="hidden" value="539933151307501" name="p_page_submission_id">
<input id="pRequest" type="hidden" value="" name="p_request">
<div id="delta-page-header" class="ui-helper-clearfix ui-layout-pane ui-layout-pane-north open" pane="north" style="visibility: visible; display: block; position: absolute; margin: 0px; z-index: 2; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 134px;">
<div id="delta-sidebar-west" class="ui-layout-pane ui-layout-pane-west open" pane="west" style="visibility: visible; display: block; position: absolute; margin: 0px; z-index: 2; left: 0px; right: auto; top: 140px; bottom: 31px; height: 584px; width: 260px;">
<div id="delta-page-content" class="ui-layout-pane ui-layout-pane-center open" pane="center" style="visibility: visible; display: block; position: absolute; margin: 0px; z-index: 2; left: 266px; right: 0px; top: 140px; bottom: 31px; height: 584px; width: 1654px;">
<style>
<div id="AjaxLoading" style="display:none; z-index:12100; margin-left:40%; margin-top:16%;position:absolute">
<div id="delta-messages" class="delta-messages" style="width:400px;margin-left:40%;margin-top:10%;position:absolute;z-index:12000"> </div>
<div id="delta-layout-region-3" class="delta-layout-region">
<div id="R173592573484351754" class="ui-widget ui-widget-content ui-corner-all delta-region delta-reports-region" style="width:800px; margin:auto; margin-top: 20px;">
<div class="ui-widget-header ui-corner-all ui-helper-clearfix delta-region-header">
<div class="delta-region-content">
<table id="apex_layout_173592573484351754" class="formlayout" border="0" datatable="0" role="presentation" summary="">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<td class="tooltip" align="right" nowrap="nowrap" title="Geben Sie hier bitte eine Beschreibung Ihres Problems an!">
<td align="left" rowspan="1" colspan="1">
<input type="hidden" value="173592973962361339" name="p_arg_names">
<textarea id="P1_BESCHREIBUNG" class="rich_text_editor" wrap="virtual" cols="80" rows="5" name="p_t04" style="visibility: hidden; display: none;"></textarea>
<span id="cke_P1_BESCHREIBUNG" class="cke_skin_kama cke_1 cke_editor_P1_BESCHREIBUNG" lang="de" style="width: 748px;" aria-labelledby="cke_P1_BESCHREIBUNG_arialbl" role="application" title=" " dir="ltr">
<span id="cke_P1_BESCHREIBUNG_arialbl" class="cke_voice_label">WYSIWYG-Editor</span>
<span class="cke_browser_gecko" role="presentation">
<span class="cke_wrapper cke_ltr" role="presentation">
<table class="cke_editor" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr role="presentation" style="-moz-user-select: none;">
<tr role="presentation">
<td id="cke_contents_P1_BESCHREIBUNG" class="cke_contents" role="presentation" style="height:100px">
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="WYSIWYG-Editor, P1_BESCHREIBUNG, drücken Sie ALT 0 für Hilfe." style="width:100%;height:100%">
<html lang="de" dir="ltr">
<head>
<body class="cke_show_borders" contenteditable="true" spellcheck="true">
<p>
<br type="_moz">
</p>
</body>
</html>
</iframe>
</td>
</tr>
<tr role="presentation" style="-moz-user-select: none;">
</tbody>
</table>
<style>
</span>
</span>
<span role="presentation" style="position:absolute;" tabindex="-1"></span>
</span>
<a class="eLink" tabindex="999" href="javascript:popupURL('f?p=4000:371:1758111285661501:::371:P371_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:173592973962361339,102,1');" title="Edit">
</td>
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="delta-box-body" class="delta-layout-region"></div>
<div id="delta-layout-region-6" class="delta-layout-region"></div>
</div>
<div id="delta-sidebar-east">
<div id="delta-page-footer" class="ui-layout-pane ui-layout-pane-south open" pane="south" style="visibility: visible; display: block; position: absolute; margin: 0px; z-index: 2; top: auto; bottom: 0px; left: 0px; right: 0px; width: auto; height: 25px;">
<input type="hidden" value="" name="p_md5_checksum">
<input type="hidden" value="73C61FCCC4B8E3E87AAE6940C0C0B142" name="p_page_checksum">
</form>
<div id="delta-layout-region-8" class="delta-layout-region"></div>
<script type="text/javascript">
<div id="apex-dev-toolbar">
<link type="text/css" href="/i/plugins/tooltip/jquery.ui.tooltip.css" rel="stylesheet">
<style type="text/css">
<script src="/i/libraries/jquery-autocomplete/1.1/apex.jquery.autocomplete.min.js" type="text/javascript">
<script src="/i/libraries/ckeditor/3.6.1/ckeditor.js" type="text/javascript">
<script src="/i/plugins/tooltip/jquery.hoverIntent.min.js" type="text/javascript">
<script src="/i/plugins/tooltip/jquery.ui.tooltip.min.js" type="text/javascript">
<script src="/i/plugins/tooltip/com_ankerpoort_apex_tooltip.min.js" type="text/javascript">
<script src="/i/plugins/tooltip/jquery.metadata.js" type="text/javascript">
<script src="wwv_flow_file_mgr.get_file?p_plugin_id=28534622225836936502&p_security_group_id=137074705048672013&p_file_name=apex_save_before_exit.min.js" type="text/javascript">
<script type="text/javascript">
<span id="delta-page-header-resizer" class="ui-layout-resizer ui-layout-resizer-north ui-layout-resizer-open ui-layout-resizer-north-open" resizer="north" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 1; top: 134px; width: 1920px; height: 6px; left: 0px;">
<span id="delta-page-footer-resizer" class="ui-layout-resizer ui-layout-resizer-south ui-layout-resizer-open ui-layout-resizer-south-open" resizer="south" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 1; bottom: 25px; width: 1920px; height: 6px; left: 0px;">
<span id="delta-sidebar-west-resizer" class="ui-layout-resizer ui-layout-resizer-west ui-layout-resizer-open ui-layout-resizer-west-open ui-draggable" resizer="west" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 1; left: 260px; height: 584px; width: 6px; top: 140px; cursor: w-resize;" title="Resize">
<div id="ui-tooltip-0" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" role="tooltip" aria-hidden="true" style="display: none;">
<div id="ui-tooltip-1" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" role="tooltip" aria-hidden="true" style="display: none;">
<div id="ui-tooltip-2" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" role="tooltip" aria-hidden="true" style="display: none;">
<div id="ui-tooltip-3" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" role="tooltip" aria-hidden="true" style="display: none;">
<div id="ui-tooltip-4" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" role="tooltip" aria-hidden="true" style="display: none;">
</body>
</html>

Open in new window

0
 
ProculopsisCommented:
The "^=" selector should work, as in this jsfiddle.
0
 
basicinstinctCommented:
skahlert, you have syntax errors in the code you posted above...

like here, use single quotes instead of doubles to prevent closing the onpageshow attribute prematurely: doc.$.designMode = 'off'; doc.$.designMode = 'on';
0
 
skahlert2010Author Commented:
Thanks for your answers!

Regarding the syntax errors! The majority of the code is generated by Oracle Application Express. I have absolutely no control about that. All I can say is that it works in all browsers in the Apex Environment.

I was finally able to add an id and class "ckeditor" to the region that needs to be detected. Hence it should be easier to select the elemnt. Your approaches do not work for some reason, although I am sure they're perfectly correct.

As you can see I have a webpage containing a form consisting of a table.
One table row contains an iframe. My master page contains a jQuery function that is triggered upon hitting F10. Once I enter the iframe, the function is not triggered anymore as I have left the master document. Hence I need to a jQuery Selector to trigger the function if focus is set on the element with id=ckeditor. The misery is that no matter which attempt I choose, the selector is not properly defined.

Do you have any other ideas?

Sorry for my awkward description!

<table id="apex_layout_12589647835525562" class="formlayout" border="0" datatable="0" role="presentation" summary="">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<td class="tooltip" align="left" valign="top" nowrap="nowrap" title="Geben Sie hier als Bearbeiter optional den Lösungsansatz ein!" style="padding: 0pt;">
<td align="left" rowspan="1" colspan="1" style="padding: 0pt;">
<input type="hidden" value="12593461083525566" name="p_arg_names">
<textarea id="P8_STR_BEARBEITUNG" class="rich_text_editor" wrap="virtual" cols="80" rows="5" name="p_t14" style="visibility: hidden; display: none;"></textarea>
<span id="cke_P8_STR_BEARBEITUNG" class="cke_skin_kama cke_2 cke_editor_P8_STR_BEARBEITUNG" lang="de" style="width: 748px;" aria-labelledby="cke_P8_STR_BEARBEITUNG_arialbl" role="application" title=" " dir="ltr">
<span id="cke_P8_STR_BEARBEITUNG_arialbl" class="cke_voice_label">WYSIWYG-Editor</span>
<span class="cke_browser_gecko" role="presentation">
<span class="cke_wrapper cke_ltr" role="presentation">
<table class="cke_editor" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr role="presentation" style="-moz-user-select: none;">
<tr role="presentation">
<td id="cke_contents_P8_STR_BEARBEITUNG" class="cke_contents" role="presentation" style="height:100px">
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="WYSIWYG-Editor, P8_STR_BEARBEITUNG, drücken Sie ALT 0 für Hilfe." style="width:100%;height:100%">
<html lang="de" dir="ltr">
<head>
<body id="ckeditor" class="ckeditor cke_show_borders" contenteditable="true" spellcheck="true">
<p>
</body>
</html>
</iframe>
</td>
</tr>
<tr role="presentation" style="-moz-user-select: none;">
</tbody>
</table>
</span>
</span>
<span role="presentation" style="position:absolute;" tabindex="-1"></span>
</span>
<a class="eLink" tabindex="999" href="javascript:popupURL('f?p=4000:371:1758111285661501:::371:P371_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:12593461083525566,102,8');" title="Edit">
</td>
</tr>
<tr>
</tbody>
</table>

Open in new window

0
 
Kusala WijayasenaSoftware EngineerCommented:
Since IFrame is in a layout table and that layout table contains only one IFrame, using following plain javascript you can get hold the IFrame object
var layoutTable = document.getElementById("apex_layout_12589647835525562");
var iframeObj = layoutTable.getElementsByTagName('iframe')[0];

Open in new window

-Kusala
0
 
skahlert2010Author Commented:
Dear kusala,

thanks for your help.

I tried the follwoing code in order to check if the selector exists.

Unfortunately the alert is not being fired and I guess the selector is still incorrect. Could you have an unother look please? Thank you!

 <script>
var layoutTable = document.getElementById("apex_layout_12589647835525562");
var iframeObj = layoutTable.getElementsByTagName('iframe')[0];

if ($("iframeObj").length > 0){
  alert("Object detected!");
}
</script>

Open in new window

0
 
skahlert2010Author Commented:
Hi kusala! Firebug says that iframeObj is undefined!
No alert is raised!
0
 
Kusala WijayasenaSoftware EngineerCommented:
You have to add script to end of the page. Then it can access the object. otherwise, if you call it before the object was written into DOM, you cannot access it

or else, put this code inside a event (like a button click) and check

-Kusala
0
 
skahlert2010Author Commented:
Hi kusala!

Of course I added script tags and pasted the code to the page footer to make sure all elements are lloaded before the code is executed.
While iframeObj is not detected for some reason, I can address layoutTable.

Do you have an idea what else can be done to find the iframe. I have the feeling you are on the right track. It is probably just a small thing in the structure of the html document, which is overseen.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.