This question already has answers here:
How to make a video fullscreen when it is placed inside an iframe?
(5 answers)
Closed 3 years ago.
I'm writing code that generates a <iframe> so that other people can put this code on their sites, one of the functions of this <iframe> is requestFullscreen();
This request is working optimally, but it does not allow to do this in a cross domain.
Below is an image representing the structure of the elements.
PHP main page code
<div id="alpha">
A simple full screen template
</div>
JS code
$(document).ready(function(){
$('a').click(function(){
var screenresize = $('#alpha').get(0);
screenresize.requestFullscreen();
return false;
});
});
Cross domain HTML/PHP code
<iframe src="http://experimental.devz/iframe.php"></iframe>
I know it's possible to do this because youtube also works the same way, although your code is scrambled, I know it does it or similar.
You will need an iframe with the attribute allow="fullscreen"
Set allow="fullscreen can activate fullscreen mode by calling the requestFullscreen() method.
See this iframe: The Inline Frame element
Example:
<iframe allow="fullscreen" src="http://experimental.devz/iframe.php"></iframe>
Related
I am trying to grab the Iframe from here:
http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc126/
The code is here:
<iframe width=940 height=700 src="http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc126/" scrolling=no frameborder=0/>
but when I add it in the plain text editor on WP it does not work, just a huge white space.
Now I am thinking this is a problem with the Iframe itself? It has no tag, so maybe this is why?
Check if your browser supports iframe or not. Check
I have been tasked to use this approach a SharePoint 2013 site, so here goes.
Background: - I have a page in a SharePoint 2013 site, which has a "content editor" webpart displaying a page from within the same domain/site collection. The below code (which is not mine) I have placed in the content editor and it displays the page all fine.
Issue - My requirement is to "remove the globalnav" from the page within the content editor which I presume is using an Iframe. Now I can use the F12 dev tools with IE11 and find the CSS class which is the follow - ms-dialog #globalNavBox and set the display to "none" this is exactly how I want it to look.
The only thing I do not know how to achieve here is how to make this happen via using some sort of code on the page displaying the embedded page.??
this is the code I am using in the content editor to display my page I want to modify.
#mydiv{
width:1280px; height:1000px;
overflow:hidden;
;
}
#myframe{
;
top:-190px;
left:-100px;
width:1080px;
height:1000px;
}
</style>
<div id="mydiv">
<iframe id="myframe" src="/gen/genInduction/Lists...blah scrolling="no"></iframe> </div>
now I have no idea how to add in the code (if I can) to remove the css .ms-dialog #globalNavBox {display: none;} so that when the page is displayed the globalnav is removed.
I hope this makes sense as this is the first time I have used this site to ask a question. I have also searched endlessly before I asked this question and have tried various things to make this work but I just cant/understand how to make this happen.
Place the following in the page after the iframe
<script>
document.getElementById("myframe").contentDocument.getElementById("globalNavBox").style.display="none";
</script>
I believe you'll still be able to access the iframe's content since they both belong to the same domain, unless the iframe is sandboxed (which the example clearly shows it isn't). Adding to JBiserkov's slick streamlined answer, this will cover some concerns with loading of the iframe. Under many circumstances, an iframe might be a little late to the party, so you should be prepared for that. The following links helped me understand iframes:
Iframes, Onload, and Document.domain
Iframe Tutorials
-Reference to the iframe
var iFrame = document.getElementById('myframe'),
-Reference to the iframe's document object
-This shorthand conditional expression is the key to accessing any content inside the iframed page.
iDoc = iFrame.contentDocument ? iFrame.contentDocument : iFrame.contentWindow.document,
-Reference to the target element #globalNavBox
gNav = iDoc.getElementById('globalNavBox');
-When the iframe is loaded, grab globalNavBox's style to "display" and set to "none"
iframe.onload = function () {
gNav.style.display = 'none';
};
This question already has answers here:
How to show google.com in an iframe?
(9 answers)
Closed 7 years ago.
<iframe src ="http://google.com" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
How can i get this result done?
I know CORS and jsonp are solution for this . But i really dont know how to implement it . I dont have any javascript on my pages . Just normal html pages. If its not possible doing just html codes then how can i achieve my goal using
javascript
or
jquery
.I want to get google.com in my iFrame .
Google is preventing you from embedding their website into your iFrame, since you're not on the same domain (*.google.com).
Also: there are a ton of questions like this. Check this answer in particular -- it's not what you want, but it might be good enough.
This question already has answers here:
Getting iframe content's height while iframe is hosting an EXTERNAL website whose code CAN'T be accessed [duplicate]
(2 answers)
Closed 8 years ago.
I was able to load internal pages with full width successfully using this
<script type="text/javascript">
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
</script>
<iframe width="100%" src="/mypage.php"
scrolling="no" id="the_iframe" onLoad="calcHeight();" height="1px" frameborder="0" ></iframe>
This is working great for any INTERNAL pages (page from same domain). I am struggling to get it work with external pages (cross-domain) but didnt find any solution.
IT SEEMS IT IS IMPOSSIBLE TO DO CROSS DOMAIN COMMUNICATION WHICH I REALLY DIDN'T EXPECT. WHATEVER, THANK YOU ALL.
It is impossible to access the contents of iframes that are referencing cross domain urls.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery/JavaScript: accessing contents of an iframe
If i run this on my localhost, it works fine, as long as the src if the iframe is on localhost aswell..
But as soon as i get it online, it doesent do a thing...
http://jsfiddle.net/WnwRc/9/
The goal right now is simply to alert the HTML that is loaded in to the iframe.
A security feature in browsers prevents you from accessing certain DOM objects inside iFrames whose document.domain property is different from the accessing iFrame.
If you're trying to do some web scraping or automation via an iFrame, I'm afraid that's not going to work very well.
Here's a quick link with tons of information for iFrame do's and don'ts:
http://softwareas.com/cross-domain-communication-with-iframes
Load Event doesn't bubble as properly as per jquery website
http://api.jquery.com/load-event/
Note: The .live() and .delegate() methods cannot be used to detect the load event of an iframe. The load event does not correctly bubble up the parent document and the event.target isn't set by Firefox, IE9 or Chrome, which is required to do event delegation.