Solved

jQuery Selector for IFRAME

Posted on 2012-04-13
15
1,123 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
  • 6
  • 3
  • 3
  • +2
15 Comments
 
LVL 23

Expert Comment

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

Expert Comment

by:chaitu chaitu
ID: 37841376
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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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)

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now