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.
Related
<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
To clarify - I've built a comment system that sanitizes all HTML and displays it as plaintext to prevent trolling, cross-site scripting, etc.
On top of that, I have javascript that runs after the page loads, and detects DIRECT links to Youtube and Imgur content, then builds the appropriate player/frame/tag to display that content.
Here is my example code:
<div class="video imgur">
https://i.imgur.com/Ym7MypF.jpg
https://www.youtube.com/watch?v=t-ZRX8984sc
</div>
And script:
$('.video').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
});
$('.imgur').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:i\.)?(?:imgur\.com|)\/(.+)/g, '<img src="https://i.imgur.com/$1">');
});
I can get one to work without the other - however - running both on the same page invariably produces broken tags and links like this, depending on the order:
<iframe width="420" height="345" src="https:<img src=" https:="" i.imgur.com="" www.youtube.com="" embed="" t-zrx8984sc"="" frameborder="0" allowfullscreen=""></iframe>
Why won't my code differentiate between Imgur and Youtube and handle them separately? I'm new at Regex and cannot tell what I'm doing wrong. If anyone could sort me out I'd be grateful.
Your Imgur regex matches too many URLs, e.g.:
https://example.com
https://www.youtube.com/watch?v=foobar
https://imgur.com/foobar
Try using this regex instead: /(?:https:\/\/)?(?:i\.)?(?:imgur\.com)\/(.+)/g
I have a string that might contain one or more instances of a YouTube or Vimeo iframe. I am looking for a javascript function that searches through this string, detects the ID of the video in the iframe src, then replaces the existing instances of the iframe with an iframe wrapped in a div.
So input would be:
<p>Interesting text, great, fantastic.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EShfC-uhlv8" frameborder="0" allowfullscreen></iframe>
<p>Another great thing</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/umiN04tPpl0" frameborder="0" allowfullscreen></iframe>
Output:
<p>Interesting text, great, fantastic.</p>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/EShfC-uhlv8?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
<p>Another great thing</p>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/umiN04tPpl0?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
I have tried wrapping my brain around regexp, even with all the examples around I just can't seem to figure out how to do this.
Anyone have a solution?
Copy/pasting the work I am about to reference directly would get me in trouble, so hopefully an explanation of the methodology would be sufficient. ( If it's not, let me know. )
Assuming you have no idea of the names of the iframes, just plop down a getElementsByTagName(iframe) and then iterate over the resulting array with a loop that gathers all the info from the iframe, which you will use to create a replacement element using innerHTML. This replacement element will have you funky iframe wrapped in whatever you want. Finally, we use replaceChild(replacement, original) and you're set.
For example, here is how I create my replacement element:
var replacement = document.createElement("replacement");
replacement.innerHTML =
"<div class=iframe-container>"
+ "<iframe src=https://www.youtube.com/embed/EShfC-uhlv8?html5=1 frameborder=0 allowfullscreen></iframe>"
+ "</div>"
In simpler terms -- write the code as it would look in the .html file.
Another tricky thing you can do is adding IDs to all the elements and just going through them with getElementById, but it seems like a lot of extra work, unless you're the one developing the page and can just ID-entify the iframes.
Let me know how it goes! If anything is unclear, which would be understandable, considering the format I've written all of this in, just let me know and I will help.
PS: I know a lot of people here don't like innerHTML. They are all pansies.
I'm trying to play an embedded Youtube video after a button click (.playbutton).
The video is embedded as an iframe within a div named #youtubecontainer.
The easiest way to achieve this is to append '?autoplay=1' to the iframe's src attribute. (I know there is an API, but for now I need to do it this way.)
My HTML code is this
<div class="playbutton">
<img class="playicon">
</div>
<div id="youtubecontainer">
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>
Javascript code
$(function() {
//This controls YouTube playback via button
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', ($("#youtubecontainer iframe").attr('src') + '?autoplay=1'));
});
});
However, this appends'?autoplay=1' to the src twice, so it reads as follows and fails:
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520?autoplay=1?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
Any ideas why?
Try to replace that autoplay before you add it. Because when you second click on it, you are adding again the ?autoplay=1 what has still there before.
Working DEMO
$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');
You could try to save the original src of the iframe before the click event:
var source;
$(function() {
//This controls YouTube playback via button
source = $("#youtubecontainer iframe").attr('src');
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/notjtz3d/1/
I have the following iframe within a parent window:
<iframe
name="sg_iframe"
id="sg_iframe"
src="www.myurl.com"
align="left"
height="150px"
width="750"
frameborder="0"
marginheight="0"
marginwidth="0"
overflow="auto">
</iframe>
Now within www.myurl.com, let’s say I have a report that display 3 fields based on some criteria.
So based on this, how can I check from the parent form whether the iframe described above is empty of data, i.e. no report data listed or actually does have data using jquery/javascript?
Basically just need to know if the report within the iframe has 0 rows or 1 or more rows.
Thanks.
If it's an internal URL, you can use jQuery's load to get the page's content.
If it's an external URL, you can't.
$('iframe').each(function() {
if($(this).contents().find('#content').text() == '') {
$(this).addClass('warning');
}
});