Develop Reference

Read iFrame content with Jquery (iFrame loads more ajax in itself)

I have a video player I implement with an iFrame.
<iframe
src="//player.twitch.tv/?video=v209807471&autoplay=true&time=02h59m45s"
frameborder="0"
scrolling="no"
allowfullscreen="true"
id="tFrame"
class="ls-vod-iframe"
>
</iframe>
I would now like to read the current timestamp which is located in the .player-seek__time span inside this iframe.
When I check the source code of //player.twitch.tv/?video=v209807471&autoplay=true&time=02h59m45s if shows me an empty div of #video-playback so I assume it loads the contents in another call internally.
I tried it with this:
var $playerBody = $('#tFrame').contents().find('#video-playback');
var $ts = $playerBody.find('.player-seek__time');
console.log($ts);
but $ts.length is 0.
Is there another way to get the content of .player-seek__time or is anything wrong with the above code in general?

getTimeStamp = function() {
var frameDoc = document.getElementById('tFrame').contentDocument;
if (frameDoc) {
return frameDoc.body.querySelector('#video-playback > .player-seek__time').textContent;
}
else {
return false; //maybe access is blocked by the website
}
}
document.getElementById('tFrame').addEventListener('load', function() {
alert(getTimeStamp());
});
<iframe
src="//player.twitch.tv/?video=v209807471&autoplay=true&time=02h59m45s"
frameborder="0"
scrolling="no"
allowfullscreen="true"
id="tFrame"
class="ls-vod-iframe"
>
</iframe>
This should work in general but it seems that twitch won't allow you to load their site inside an iframe?
Also same-origin-policy could prevent an access.
For me it only works when using this code via the console inside a tab.

Remove id from iframe

I have an iframe of a certain page from a site that I'm using, but I don't want all the parts of that page to be displayed with the iframe. Particularly, there's a navigation sidebar on the page that I don't want to be in the iframe. I'm trying to achieve this with the javascript seen below, but I can't quite figure it out.
<iframe width="800" height="800" src="scores/new?site_id=193">
<script>
var element = document.getElementById("sidebar-wrapper");
element.parentNode.removeChild(element);
</script>
</iframe>

For security reasons you can't run javascript through iframes. There are some exceptions if you're on the same domain but for the most part you should really avoid it.
If the iframe isn't a site you can control then there's pretty much nothing you can do. If you do control the other site and it's a different domain you might be able to work with the postMessage functions.
Edit: Check out the docs that Mozilla has up here https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You'd need to create a listener on the inside that handles a message and hides your sidebar. Then on the parent send a message to the iframe to trigger that function.
Parent:
var iframe = document.getElementById('#iframeID');
iframe.contentWindow.postMessage('iframeTrigger');
Iframe:
window.addEventListener('iframeTrigger', hideSidebar);
function hideSidebar() {
//do stuff
}

You can insert a control in the iframed page
//inside the iframed page
var iframe = (function() {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
})();
if(iframe === true) {
var element = document.getElementById("sidebar-wrapper");
element.parentNode.removeChild(element);
}
Hope this could suit your need.

This should work theoretically, and it works in console. But this doesn't work in the HTML, although you are trying it from the same domain, because of security reasons. I just wanted to tell my view and I tried this:
<iframe src="http://output.jsbin.com/figujeyiyo" frameborder="0" id="ifrm">
Sorry, iframes not supported.
</iframe>
<script>
console.log(document.getElementById("ifrm").contentDocument.documentElement.getElementsByTagName("div"));
e = document.getElementById("ifrm").contentDocument.documentElement.getElementsByTagName("div")[0];
console.log(e);
e.parentNode.removeChild(element);
</script>

You need to execute the code when the page loads, you can do it like this:
document.addEventListener('DOMContentLoaded', function() {
var element = document.getElementById("sidebar-wrapper");
element.parentNode.removeChild(element);
});

Iframe/href difficulties

In short, we have a page with an iframe, and I want to target the page URL dynamically.
For simplicity, the page is located at http://1/2/3.aspx
The iframe would be on the 3.aspx page, and the iframe points to a completely different URL, let's say http://100/101/102.html
I want to target the iframe to go to http://1/2/"some URL"
A coworker suggested inline javascript using window.location.parent, but I can't figure out how to implement this. Using the usual ../ in the link's href tag only results in me navigate up within the frame's context (to 101, 100, so on).
As always, thank you to the community for your time.
EDIT: I would like to use inline javascript for this if at all possible.

I guess you mean something like this
<iframe id="ifr" src=""></iframe>
<script>
document.getElemenById("ifr").src = "http://1.2.3/page.html";
</script>
Update
To use location data from the iframe's parent, you can do like this
<iframe id="ifr" src=""></iframe>
<script>
var parenturl = parent.location.href;
var newurl = parenturl.replace("from-this","to-this");
document.getElemenById("ifr").src = newurl;
</script>

javascript frame navigation in ie11 with a pdf

I have a simple web page where 1 frame displays a pdf and another a menu bar.
<iframe src="bar.html" name="menu" ></iframe>
<iframe src="doc.pdf" name="itempane" ></iframe>
Using chrome I can navigate from the menu bar to the parent and back down to the frame containing the pdf in order to print it
var pWindow = window.parent;
pWindow['itempane'].print();
Attempting to do the same in IE11 gives an Invalid calling object error.
you can see this at http://www.abhrdev.co.uk/main.html
What am I doing wrong / what is IE doing differently?
Cheers
Updated.....
I think I have proved that this is not a javascript coding issue but related to the pdf handling in IE. With the following page
Print PDF<br/>
Print HTML
<iframe src="bar_1.html" name="menu" ></iframe>
<iframe src="doc.pdf" name="pdfpane" ></iframe>
<iframe src="doc.html" name="htmlpane" ></iframe>
and this function
function printFromMain(paneName) {
var pWindow = window[paneName];
pWindow.focus();
pWindow.print();
}
the printing of the html page works but not the pdf the pWindow.focus() gives Invalid Calling Object - any insight into why that might be greatfully recieved

After trying several things, I finally go this to work in IE11:
1) use an object tag instead of iframe
2) run focus() / print() directly on the element
3) run after a timeout, to make sure everything in is loaded. There may be a better way (like using some event listener) to do this, as the timeout time needs to be fairly long for it to work properly
setTimeout(function () {
var contentThingy = document.getElementById('itempane');
contentThingy.focus();
contentThingy.print();
}, 4000);
Object (with a specified id) instead of iframe:
<object id="itempane" ... ></object>
Note: doesn't work in chrome. One of the other variations in the other answers (i.e. using ContentWindow) may.

Try actually using the window.frames to get the frameList and reference it by the frame name that way.
var pWindow = window.parent; //reference the parent from the iframe
var ifr = pWindow.frames.itempane; //get the pdf frame from the frame list
ifr.focus();
ifr.print();

Try this
<iframe src="bar.html" name="menu" ></iframe>
<iframe src="doc.pdf" ID="itempane" ></iframe>
var otherPane = parent.document.getElementById("itempane");
otherPane.focus(); // OR
otherPane.print(); // OR
var doc = otherPane.contentWindow || otherPane.contentDocument;
doc.focus();
doc.print();

How to store iframe in a variable?

<html>
<body>
<iframe id="src">
</body>
</html>
I want to have the iframe show up in the div element through a Javascript function but I can't seem to figure out what isn't working. Any ideas?
document.getElementById('site').src = http://www.w3schools.com/;
Thanks in advance!

Try
document.getElementById('src').src = 'http://www.w3schools.com/';
a) the url should be provided as string (quoted)
b) the id of your iframe is src not site

Your iframe don't have the id site, so your code won't have any effect.
(Also please note that you didn't close the iframe tag) .
Here's the right code (fiddle) .
<input type="button" onclick="changeIframeSrc('myFrame');" value="changeSrc">
<iframe src="http://www.example.com" id="myFrame"></iframe>
<script>
function changeIframeSrc(id) {
e = document.getElementById(id);
e.src = "http://www.wikipedia.com/";
}
</script>

First, a couple small things:
the id on your iframe appears to be src and not site; and
you need to close the iframe tag.
Assuming that you're just dealing with one iframe and it has an id then by all means:
var myIframe = document.getElementById('src');
// gives you just that one iframe element
You may want to consider document.querySelectorAll though, in case you're working with more than one iframe.
var iframes = document.querySelectorAll('iframe');
See that in action: http://jsbin.com/equzey/2/edit
And important side note: if all you need is access to the iframe element (e.g., to manipulate its source or to apply CSS via the style attribute) then the above should be fine. However, if you need to work with the contents of the iframe, you'll need to get inside its web page context with the contentWindow property:
var iframes = document.querySelectorAll('iframe');
iframes[0].contentWindow;