Solved

jQuery Selector for IFRAME

Posted on 2012-04-13
15
1,193 Views
Last Modified: 2012-06-27
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!
0
Comment
Question by:skahlert2010
[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
  • 6
  • 3
  • 3
  • +2
15 Comments
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37841375
$('iframe[title^="WYSIWYG"]')
0
 

Author Comment

by:skahlert2010
ID: 37841407
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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37841412
can you paste your HTML code?
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37841429
it returns a nodelist,
here's how to use it: http://jsfiddle.net/GFKCL/1/
0
 

Author Comment

by:skahlert2010
ID: 37841442
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
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37841449
The "^=" selector should work, as in this jsfiddle.
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37841451
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
 

Author Comment

by:skahlert2010
ID: 37841546
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
 
LVL 11

Expert Comment

by:Kusala Wijayasena
ID: 37842487
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
 

Author Comment

by:skahlert2010
ID: 37850146
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
 
LVL 11

Accepted Solution

by:
Kusala Wijayasena earned 500 total points
ID: 37850160
"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
 

Author Comment

by:skahlert2010
ID: 37850172
Hi kusala! Firebug says that iframeObj is undefined!
No alert is raised!
0
 
LVL 11

Expert Comment

by:Kusala Wijayasena
ID: 37850246
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
 

Author Comment

by:skahlert2010
ID: 37850529
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

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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
Course of the Month11 days, 13 hours left to enroll

623 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