<iframe class="class_name">
<html>
<head></head>
<body>
<div>
<!-- All of the stuff -->
</div>
</body>
</html>
</iframe>
How can I access to elements of this iframe?
.frame("class='classname'")
The above doesn't work.
Although two iframes have the same class, this will hide only the first iframe.
function hide() {
var iframe = document.getElementsByClassName("iframe");
iframe[0].style.display = "none";
}
<iframe class="iframe"></iframe>
<iframe class="iframe"></iframe>
<br>
<button onclick="hide()">Hide 1st Iframe</button>
What does this code does?
document.getElementsByClassName("iframe") gets all the elements with the class iframe and set the elements as the value of a variable named iframe. The number inside [] defines one element of the many. If the number inside [] is 0, the first element out of the group of elements is defined. After [], you can set the property you want.
Try with an id
<iframe id="your_id">
and use
.frame('your_id')
But here it will not work because of the security policy. Try it on your machine.
Read more about X-XSS-Protection.
var frame = document.querySelector(".myframe");
var content = frame.contentDocument;
console.log(content);
<iframe class="myframe" width="560" height="315" src="http://www.weather.gov/" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Assuming that you are using nightwatch - I see you're using .frame() and that is the Nightwatch method for selecting iframes - you cannot switch to an iframe by class, but you can use an index or by name if the element has a name attribute.
These posts should help:
Can't select an Iframe in selenium webdriver
Selecting nested iframe - selenium / javascript / node-js
Related
There is a iframe fb group like, and need to hide it on click, but jQuery doesnt work
<script>
$(".closeFrame").click(function(){
$("#test").remove();
});
</script>
<div id = "test" class='like-btn'>
<iframe = "#" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
First of all, you need to understand the difference between the two elements: the button is the one that has to be clicked and the other element (the div or the iframe) is the one that is going to be hidden. It is important to understand this correctly in order to code the script properly.
Javascript code (using jQuery)
$(".hide").click(function () {
$(".elementtohide").hide();
});
See it in action: JSFiddle
Explanation
The idea is to attach an event to the button that has to be clicked in order to receive the user's click (this is made with the jQuery method called .click()). Inside that, we must especify what is going to happen when the click is done, so we make a call to the jQuery method called .hide() in order to hide the element (I have used a div but you can use an iframe or whatever you want).
Note: as mentioned in comments, .hide() and .remove() have different behaviours: the first one just adds the style display: none to the element and the second removes the element from the DOM, which means that if you had to show it again, you would have to create it. Use the one that better fits your needs.
A code like this can work
<div id = "test" class='like-btn'>
<iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
but
When you click into an iframe you will click on another part of the world so will not work so the code above will work only if the element isn't an iframe(if is a DIV can work)
so
the solution should be
<div id = "test" class='like-btn'>
<button onclick="document.getElementById('test').style.display = 'none'" value="Press me" name="closeBtn"/>
<iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
How to get one iframe from group of iframe in div tags.
Here's the code:
<div id="mytesting">
<iframe src="http://google.com"></iframe>
<iframe src="http://facebook.com"></iframe>
<iframe src="http://mytalk.com"></iframe>
<iframe src="http://gmail.com"></iframe>
</div>
How to get one iframe from those for suppose I want <iframe src="http://facebook.com"></iframe> so how can I get from group of iframes using jQuery?
Do this:
var iframe = $('#mytesting iframe[src="http://facebook.com"]');
Or
var iframe = $('iframe[src="http://facebook.com"]', '#mytesting');
Or without jQuery:
var iframe = document.querySelector('#mytesting iframe[src="http://facebook.com"]');
You can do this:
var x = $("#mytesting").find("[src='http://facebook.com']")[0];
JS Fiddle
This question already has answers here:
How to update/change HTML content with JavaScript and prevent the page from refreshing?
(4 answers)
Closed 8 years ago.
so I'm attempting to make a page where I click on a button and the HTML code of the div next to it changes. Essentially, I want to be able to click a link and my code inside the div changes.
Here are the two different HTML codes:
Number One: (id = contentPOP)
<div id="contentPOP">
<h3>Hit like a girl entry, "Little Black Dress" by One Direction</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/QW6naMc6TWk?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen> </iframe>
<br>
<h3>Remembering Steve Jobs</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/q7oyy0FjhAY?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
</div>
Number Two (id = "contentNEW")
<div id="contentNEW">
<h3>Slow Motion War!</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/Y2996S-8oEU?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
<br>
<h3>1 Year Aniversary of Teddy Bear Productions!</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/7Tim_K74ua8?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of all the code
NOTE: I have no idea how to do this, so a detailed explanation would be very helpful. Also, I want to be able to do this with only JS, no JQuery
First, uncomment the following so it exists on the page:
<!--THE BELOW CODE SHOULD REPLACE THE ABOVE CODE
<div id="contentNEW">
...
</div>
-->
And instead hide it with CSS:
#contentNEW { display: none; }
Then add the following to your newVids() function:
function newVids() {
// target the div you want to change
var div = document.getElementById('contentPOP');
// replace its innerHTML with the innerHTML of the hidden div
div.innerHTML = document.getElementById('contentNEW').innerHTML;
}
This is really a poor way to go about what you're trying to do. You shouldn't think about toggling the visibility of each div, instead of replacing one with the other.
Listen, this is done very easily. Wrap both chunks of code inside of their own divs and give them unique IDs so that you can target them in the jquery. The inittialy hidden one, will have a display:hidden class attached to it and then you can use toggle to switch . Easy!
HERE IS AN EXAMPLE!!!
Good luck!
HTML
<p>This is a paragraph.</p>
<p class="hidden">This is a second paragraph.</p>
<button>Toggle </button>
CSS
.hidden{
display:none;
}
JS
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
For the following iframe code:
<iframe src="testA.html" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Inside testA.html, how do I tell if the webkitAllowFullScreen attribute is included using javascript?
If the allowfullscreen attributes are added to the iframe the variable below should be true
var fullscreenEnabled = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled;
This even works when the iframe src is on a different domain.
Note: the letter s in fullscreenEnabled is uppercase for Firefox
This is the most robust solution:
if(window.frameElement && window.frameElement.hasAttribute("webkitAllowFullScreen")){
}
It utilizes window.frameElement, which returns the DOM node of the parent framing element, which you can then make a hasAttribute call against.
I have an iframe that looks like this:
<iframe src="http://www.google.com" height=1000 width="500" id="myiframe"></iframe>
I want to create a link so that when I click on it, the iframe on the page changes. How can I do that using jQuery? Is it related to jQuery attr?
You don't need jQuery for that. You don't even need JavaScript for that.
Give your iframe a name, and target your anchors to point to it:
Foo
Bar
Baz
<iframe name="myiframe"></iframe>
This degrades nicely for people who have JavaScript turned off.
on clicking in the link "click here" // it will take move the link to the iframe as specified....
Click Here
<iframe src="blank.html" frameborder="0" name="test" id="test" width=1200 height=800></iframe>