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.
Related
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
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>
I have various embed codes from different gif/video sites eg
<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Each site has different ways of embedding eg <iframe>, <a>, <div> etc for the opening tag. All I need to do is add inline style to the first tag in the embed code. I thought of registering the element etc but that will fail as it will create outer tags etc. How can I achieve what I want dynamically preferably in jquery but javascript is ok. Ie The embed code will be placed in a input field and onpaste I need to insert the style then display the element. Is using regex my only option?
The tough thing is that if your embed works through an <iframe>, the content is not there before it is in the DOM, and it is the content of the iframe that you need to manipulate (some other types of embeds inject directly into your DOM, those should be easier to add style to before attaching).
This may work:
var embedCode = '<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var embed = $(embedCode);
embed.on('load', function() {
// The contents are loaded. add the styles however you choose
embed.contents().find('body').css({
width: '100%';
// etc...
});
});
// now add the iframe to your dom
$('#myEmbedContainer').append(embed);
In your question you mention using regex - I suspect you mean either to detect if it is an iframe embed, or to look into the contents of the loaded iframe. In case 1 (detect if your embed code has an iframe tag), it is probably ok. In case two, I would not try to use regex on a full document in an iframe. Jquery selectors can help you find various wrappers inside the iframe, and that's probably a better way to go. For example:
var styleRecipient = embed.contents().find('body');
if (!styleRecipient.length) {
styleRecipient = embed.contents().children('div').first();
// etc.
}
This is a complicated problem, and I would focus on making it work one embed source at a time. Good luck!
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?
<div style="width: 550px;" id="zuora_payment">
<div style="display: inline;" class="z-overlay" id="z-overlay"></div>
<div class="z-container" id="z-container">
<div class="z-data" id="z-data">
<iframe style="display: block;" class="z_hppm_iframe" allowtransparency="true" scrolling="no" overflow="visible" id="z_hppm_iframe" src="https://www.zuora.com/allowtransparencypps/PublicHostedPageLite.do?..." frameborder="0" height="912" width="300">
</iframe>
</div>
</div>
</div>
I have tried: document.getElementById('z_hppm_iframe').setAttribute("style","width:500px");
I just need to adjust the width of the iFrame element, but it shows as null in the console, so I guess I'm not selecting the element correctly.
Thank you for any help you can provide.
The iFrame is added dynamically inside a
$( document ).ready(function() {}
which is is in head of the page. So I suspect it is not available at the time the .setAttribute() runs which is inside a script tag at the end of the body. I'm not doing much in this area (as you can tell), so I just need to figure out how to run this line of js after the iframe is added (I guess).
The problem is that you're trying to use the element before it was even rendered by the browser.
You should place your <script> tag just before ending the body tag.
Another solution is to use the DOMContentLoaded event, e.g:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('z_hppm_iframe').setAttribute("style", "width:500px");
});
I suggest you to change the width by doing style.width = '500px';, instead of doing by attribute, because doing the way you are, the style attribute will going to be completely replaced.
The problem is that you're trying to use the element before it was even rendered by the browser.
^ Well that only pertains to the method the OP tried. However, since the Iframe is being added dynamically and because the DOM does not need to be rendered in order to manipulate objects, he really doesn't need to move his <script> tags to the bottom of the page. Therefore, we cannot say that this is the source of the problem.
as to the OP...
The iFrame is added dynamically...
since "width" is technically one attribute and "style", another...
var iframe = document.create('iframe');
iframe.width = 500;
//or
iframe.style.width = '500px';
hopefully this helps