We Keep Coding

document.querySelector works in console but not on realtime

I'm creating a simple html page with one audio player inside an iframe.
I need to enamble kind of autoplay for desktop and mobile.
The player is this one:
<div style="width: 100%"><iframe src="https://players.rcast.net/fixedbar1/66549" frameborder="0" scrolling="no" autoplay style="width: 100%"></iframe></div>
I put this block on the bottom of the html page:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready
setTimeout(function(){
document.querySelector('.play-btn').click();
},3000); //delay is in milliseconds
});
</script>
Using firefox console document.querySelector('.play-btn').click(); works fine, but on runtime i get:
Uncaught TypeError: document.querySelector(...) is null
Any ideas or best ways?
Thanks,
Red

You can do whatever you want in the console but you would only be able to access iframe content programmatically if your iframe domain matches your current domain.
That being said, you can:
Select the iframe, then run query selector on the iframe (you don't even need jQuery for it):
const iframeElement = document.querySelector('iframe');
iframeElement.querySelector('.play-btn').click();
Tips:
You can also play the video/music directly by calling play() on
the media elements. So you can cut out stimulating click on
the button.
querySelector is slower than getElementById, you can assign an id attribute to your iframe/button/media element and find it directly.
It will also help you avoid bugs because querySelector returns the first match. So in case you have multiple iframe or multiple elements with the class .play-btn, it can lead to unexpected behaviour.

you should select iframe at first and get its content window to access all elements on it.
const myIframe = document.querySelector('#iframe_id')
const myIframeDocument =myIframe.contentWindow.document
const myElement = myIframeDocument.body.querySelector('#target_element')
it is noticeable that the iframe should be loaded completely before your process and also domain conflict

Hope this helps:
<iframe id="video1" width="450" height="280" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
Play button
<script>
$("#playvideo").click(function(){
$("#video1")[0].src += "?autoplay=1";
});
</script>
I found this on Grepper, but it was from another Stack Overflow post.
If that doesn't help I found a different post that seems to be more related to the error.

instagram embeds.js handler to know when the iframe is loaded

I'm using embeds.js to display instagram posts on a website.
referring to https://www.instagram.com/developer/embedding/
I use also the widgets.js for twitter and with it I can load a twit, set an handler to get when the iframe is ready and then call twttr.widgets.load() in this way:
twttr.events.bind('rendered', function (event) {
//do something when the iframe is ready
});
twttr.widgets.load();
Does anybody know if there is a similar feature or maybe a workaround to get when the instagram iframe is ready?
After loading the instagram post I use:
instgrm.Embeds.process();
to render the iFrame.
side note: the application is made with angular/jquery, so the workaround can be done with those libraries.
Thanks in advance,
Daniele

I found a solution if you can not use iframe embeds.
window.__igEmbedLoaded = function( loadedItem ) {
// do something here...
};

Just use a iframe Instagram embed and use the onload event handler to trigger a function:
<script>
function doSomething(){
alert("Instagram embed loaded");
}
</script>
<iframe onload="doSomething()" src="https://www.instagram.com/p/8_kRtJBsBq/embed" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
You can generate an iframe Instagram embed coding using gramfeed:
http://gramfeed.com/instagram/embed
add onload="someFunction()" to the generated iframe embed code.

JavaScript: Detect source change from iframe

This might be a long shot but I was wondering if anyone knew if there was a way to detect (with Javascript or JQuery) if an iframes source has changed - ie: if a user changes the page within an iframe.
I want to write something like:
if (iframesource == http://www.site.com/urlA){
do something
}
else if (iframesource == http://www.site.com/urlB){
do something different
}
I already know the src attribute for the iframe element (<iframe src="http://www.site.com">) does not change if the page changes within the site so using JQuery to detect the attribute is out.
would anyone know if this is possible? Any advice would be greatly appreciated! Thanks

OK basically after loads of research I have found out that this only works if the iframe is pointing to a URL within your existing site or server. If you are pointing to another site (say YouTube) it will not work.
The best way to transfer information from one site to another is still with JSON.

You will need to build a javascript function that does a few things:
onload.
obtains src value by element id.
passes this into temp_object
enter recursive function with a set_timeout(100ms) say.
compare temp_object to object.
if true, do something, temp_object = object.
#EDIT -----> anti-sop anti-xss
<html>
<head>
<script type="text/javascript">
function GetIFrameUrl()
{
alert('url = ' + document.frames['frame1'].location.href);
}
</script>
</head>
<body>
Find the iFrame URL
<iframe name="frame1" src="http://www.google.com" width="100%" height="400"></iframe>
</body>
</html>
Getting the current src of an Iframe using JQuery

Can I call a function after the loading of an iframe appended by jquery?

This is my code :
​<div id="myContent​​​​​​​"></div>​
$('#myContent').html('<iframe height="200" frameborder="0" src="www.google.com"></iframe>');​
and I'd like, when the whole page in the frame is totally loaded, call a function, like alert("I'm finished");.
How can I do it?
P.S. dunno why jsfiddle doesnt catch the google page :)

You can do it with the event .load() (Check the api for more info).
Example:
$('#myContent').html('<iframe id="winId" height="200" frameborder="0" src="www.google.com"></iframe>');
$('#winId').load(function() {alert('loaded')})

In a nutshell, unless the iframe has the source url on the same domain/subdomain, checking if it has loaded completely, or expecting any kind of events to be propogated from a frame to the parent window is not possible.
The same domain policy clearly stops developers from doing such stuff.
Though there are a few workarounds ,e.g the code inside the iframe can change its url and keep passing information using hash tags and vice-a-versa.

Create the element, then attach the load event:
var frame = $('<iframe height="200" frameborder="0" src=http://www.google.com />');
$('body').append(frame);
frame.load(function(){
alert('loaded');
});
fiddle:
http://jsfiddle.net/x7EXa/

$('#myContent').html('<iframe height="200" frameborder="0" src="www.google.com" onload="myfunc()"></iframe>');
you should have in the page containing the IFRAME :
function myfunc()
{
alert('.......');
}
edit : the following will Not work.
$('#myContent').on('load','#myIdframe',function (){alert('.....');});
since :
From the documentation: In all browsers, the load event does not bubble. [...] Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event.
heres 2 examples :
1 work and 1 doesn't
http://jsbin.com/emuzop/2/edit#javascript,html
http://jsbin.com/emuzop/3/edit#javascript,html

jquery loads content only once

Hello my problem is that whenever i load content to an iframe through javascript and jquery it only loads the first time and then i cannot load anything over it.
the function I use is this:
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").attr('src', sourceURL );
}
and i call it through
<li><span>Google</span></li>
Am I doing something wrong?
Thanks!

I've tried to reproduce your problem, but I was not able to. I've create a very simple site with to links and one iframe:
​<a class="iframe" href="http://microsoft.com">Microsoft</a>
<a class="iframe" href="http://google.com">Google</a>
<iframe id="oPanel"></iframe>
and 4 lines of unobstrusive JavaScript to load those links within the iFrame:
​$('a').click(function(){
$('#oPanel').attr('src',$(this).attr('href'));
return false;
});​​​​​
And it's working as expected. You can try it here: http://jsfiddle.net/jQncy/