Develop Reference

Get contents from second iframe

At the moment I can retrieve the contents of the first iframe on a web page that is not mine with $('iframe').contents()
From this I can get the body tag by doing $('iframe').contents().find('body'). The results are what is expected
However, I an trying to get the body tag of the second iframe. By doing `$('iframe').eq(1) I can get the second iframe, but $('iframe').eq(1).contents() gets nothing.
How can I get the contents of the second iframe?

A lot of the Fiddles and such may not be a good test place. There are complications with CORS. Here is an example that works:
https://jsfiddle.net/Twisty/037yueqj/9/
HTML
<iframe id="frame-1"></iframe>
<iframe id="frame-2"></iframe>
JavaScript
$(function() {
var f1 = $("#frame-1"),
f2 = $("#frame-2"),
frames = $("iframe");
f1.contents().find("body").html("<strong>Frame 1</strong>");
f2.contents().find("body").html("<strong>Frame 2</strong>");
console.log(frames.eq(0).contents().find("body").text());
console.log(frames.eq(1).contents().find("body").text());
});
If you give them unique IDs or classes, you can just call on the proper selector. You can call on a wider selector and use .eq() or iterate with .each().

Had to use --disable-web-security in chromium to access contents in an iframe from another url

get iframe by its title with javascript

I want to get the iframe by it's title. The iframe doesn't have a name, id or a class. I want to get the Iframe just by it's title with plain javascript.
This is the iframe :
<iframe title="iframetitle" frameborder="0" scrolling="no"></iframe>
Please don't use Jquery or any plugin!

Use a querySelector() to find the iframe. A value inside of brackets searches for attributes [name], [title], [data-descr], etc. When adding an = something, you then are also searching the value, so [title=iframetitle] would look for something that has a title attribute with a value of iframetitle.
We could enhance the query more by saying it also has to be an iframe by doing iframe[title=iframetitle].
Here is a working example:
console.log(document.querySelector('iframe[title=iframetitle]'))
<iframe title="iframetitle" frameborder="0" scrolling="no"></iframe>

How to get iframe src value dynamically in nightwatch test case?

My html dom includes a tag and the value of the src is dynamically generated. Please see below screenshot as an example:
I want to test the dom under the selected iframe tag:
<iframe class="ide-page-frame" ng-src="http://localhost:8080/che/wksp-rn6c?uid=514006" src="http://localhost:8080/che/wksp-rn6c?uid=514006"></iframe>
I use below method to load the frame and put the assert code in the callback function. But it doesn't find any dom. The code is shown as below.
browser
.url('http://localhost:8080/dashboard/#/ide/che/wksp-rn6c')
.frame(".ide-page-frame",()=>{
// it can't find any dom here
})
})
If I load the dynamical url http://localhost:8080/che/wksp-rn6c?uid=514006 directly, it is able to find the dom elements. So I want to know how I can get the url from the iframe src in the test case. Does nightwatch support something like $(.ide-page-frame).getAttribute('src')?

I think that your problem is in browser.iframe(".ide-page-frame")
nightwatch will look for an iFrame having the id="ide-page-frame" which does not exist in your page.
If the frame id is missing or null, the server should switch to the
page's default content.
My proposition: Please change your iFrame creation by changing class="ide-page-frame" by id="ide-page-frame" (or you can just add the id and keep the class)
<iframe id="ide-page-frame" class="ide-page-frame" ng-src="http://localhost:8080/che/wksp-rn6c?uid=514006" src="http://localhost:8080/che/wksp-rn6c?uid=514006"></iframe>
Does this solve your problem?

Get iframe's element by attribute using javascript

all, I`ve a question about get iframe's element by attribute using javascript.
1.html
<iframe id="if" src="2.html">
<div attr="test">
2.html
<div attr="test">
I`ve already known that if parent page want to get the its element by attribute, we can use jQuery like
$("div[attr='test']")
But how can parent get it's iframe's element by attribute?
Please write some simple code for explain, great thanks!
Jarod
I`ve found out a solution and test fine:
$("iframe[data-label='if']").contents().find("div[attr='test']");

If I'm not totally off:
$("iframe div[attr='test']")...
Or with id:
$("#if div[attr='test']")...

Did you tried?
window.frameElement.getAttribute("data-media");

Jquery - Replace Specific Line in HTML

I'm having an issue with iframes and IDs.
I currently have an Iframe with no ID attached to as its generated by another websites javascript. So I quickly wrote a Jquery script to give IDs to Iframes on load of page, and it worked successfully. Problem is however, it applies the ID to ALL the Iframes on the page instead of specifically the one I want.
This is what I have.
<script>
$(document).ready(function () {
$("iframe").attr({
id: "iframeid1"
});
});</script>
Is there a method with Jquery to 'search and replace' something specific on the page? For example
Search for:
<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="600"
Replace with:
<iframe id="iframeid1" allowtransparency="true" frameborder="0" scrolling="no" width="160" height="600"
Any help is appreciated! Thanks in advance!

If you know it is the nth iframe on the page:
$("iframe")[n].setAttribute('id', 'iframe1');
EDIT: You could also use attribute selectors:
$("iframe[allowtransparency=true][frameborder=no][etc=etc]").attr({id: 'iframe1'});

It depends on if there is a unique way of finding the iframe you want. For example, is it the only one with width = 160 and height = 600? Or is it always the Xth iframe on the page? Is it always located in the same spot in the page?
Here are some queries as examples for all 3 scenarios:
// if the width/height combination is unique...
var iframe = $('iframe[width=160][height=600]');
// if it is always, say, the 3rd iframe on the page
var iframe = $('iframe:eq(2)'); // 0-based index
// if it is always the only iframe in a div with an id of "iframeContainer"...
var iframe = $('#iframeContainer').find('iframe');
Then you can set the attribute like you said:
iframe.attr('id', 'iframeid1');

if the iframe is wrapped inside a div, with a ID, than you can do:
<script>
$(document).ready(function () {
$("#divID iframe").attr({
id: "iframeid1"
});
});</script>

If you know where your iframe is at you can get it by index position.
If you have 4 iframes on the page and you're looking for the third (with respect to the DOM), you can do this:
$("iframe").get(3).attr({
id: "iframeid1"
});

You can use selectors to find an iframe tag with specific attributes. But you need to be able to uniquely identify the specific iframe you want from attribute values, not HTML search.
As an example:
$('iframe[width="160"][height="600"]').attr("id", "iframeid1");
This would select iframe tags with width=160 and height=600. You can add more attributes if needed to uniquely select your particular iframe.
Perhaps the best option would be to use the DOM structure around the iframe to identify which one you want. You could use parent object identifiers, ordering of the tags, etc.. whatever helps uniquely identify the one you want.