I am trying to pull data from eBay to an iframe. The problem is it does not adjust the height of its contents and leaves a large gap below. I tried taking the offsetHeight of iframe Body, but as it is CROSS-DOMAIN, I can not pull any properties out of it. Please let me know if there are any ways to achieve this by JS or even CSS.
I have already tried all I could find from StackOverflow, but it just doesn't seem to apply here.
<script>
function onLoad() {
console.log(
"height",
document.getElementById("target").contentWindow.document.body.offsetHeight
);
}
</script>
<div class="test">
<iframe
id="target"
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-top-navigation"
onload="onLoad()"
class="iframe"
frameborder="0"
height="auto"
width="100%"
src="https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1"
title="Sellers description of item"
></iframe>
</div>
Here is a pen to visualize
There is a way to achieve this, but you will need to use a proxy for cross-domain-request. You can do this with PHP. Create a php file - content.php with the following code :
<?php
$queryString = substr($_SERVER["QUERY_STRING"], 4);
$fileContents = file_get_contents($queryString);
echo $fileContents;
?>
The code above is a simple proxy server in PHP to remove the cors issue.
Your HTML will look something like this :
<div id="iframeHolder">
<iframe id="iframe"
onload='iframeResizer()'
scrolling="no"
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
src="content.php?url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1" height="100%" width="100%" ></iframe>
</div>
<script type="text/javascript">
function iframeResizer(){
let iframeHolder = document.getElementById('iframeHolder')
let iframe = document.getElementById('iframe')
let iframeHeight
let iframeHolderHeight
iframeHeight = iframe.contentWindow.document.body.offsetHeight;
console.log(iframeHeight)
iframeHolderHeight = iframeHolder.style.height = iframeHeight + 'px'
}
</script>
And css will be something like :
#iframeHolder{
height: 100%;
position: relative;
}
iframe{
position: absolute;
height: 100%;
top: 0;
left: 0;
}
Here, you will pass the URL to content.php page, where it will parse the request, and return the response. Since content.php is in the same origin, it will resolve the cors issue.
P. S. :
$queryString = substr($_SERVER["QUERY_STRING"], 4);
This code in php is because $_SERVER["QUERY_STRING"] will be
url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1
This is an invalid URL because of 'url=' prefix. substr() function will remove it.
You can use this library: iframe-resizer
It allows you the to automatically resize of the height and width of cross domain iFrames to fit their contained content.
Related
I have the html like below:
<html>
<body>
<div>Welcome.</div>
<iframe src='otherpagecontent' width='594' height='334'>
#docuemnt
<html>
<body>
<div style='color:yellow'>
This should not show in fullscreen.
</div>
<div style='color:yellow'>
This should not show in fullscreen.
</div>
<div id='fullscreen' style='color:blue;'>
This should go fullscreen only.
</div>
<div style='color:red'>
This should not show in fullscreen.
</div>
<div style='color:red'>
This should not show in fullscreen.
</div>
</body>
</html>
</iframe>
<iframe src='diffirentpage'>
#docuemnt
<button onclick="launchFullscreen(document.getelementByID('fullscreen'));">Launch Fullscreen</button>
</iframe>
</body>
</html>
In JS:
this.launchFullscreen= function (element) {
var requestFullScreen = (element.requestFullScreen || element.mozRequestFullScreen || element.webkitRequestFullScreen || element.msRequestFullscreen);
requestFullScreen.apply(element);
}
Result in Request for fullscreen was denied because of FeaturePolicy directives.
How can I get this <div id='fullscreen'> to go fullscreen?
Should I change the CSS for this <div>, or bind the request from somewhere else?
PS: This work fine on Chrome, but issue occur on Firefox.
Yes, you should use CSS for this.
You can't force the user into full-screen by F11; however, you can make your div full screen by using the following CSS
div {width: 100%; height: 100%;}
This will of course assume your div is child of the tag. Otherwise, you'd need to add the following in addition to the above code.
div {position: absolute; top: 0; left: 0;}
from:How do I make a div full screen?
You might try this
<iframe src="myurl.in"
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"></iframe >
from: https://www.geeksforgeeks.org/how-to-set-fullscreen-iframe/
I'm new here! I do not have much knowledge yet in php, I have a question in which I have tried to put a break.tv api in my configuration so that users can download mp4 from a youtube video.
I have the script in which it is only downloaded in mp3 but I wanted to make it so that it can download in mp4 as well.
In my vdl.php folder I have this:
<div class = "lr">
<? php include '../admin/config.php'; ?>
<? php echo $ down_ad_728; ?>
<? php
$ vid = $ _REQUEST ['v'];
echo
<p>
<iframe style = "width: 100%; height: 60px; border: 0; overflow: hidden;" scrolling = "no" src = "//www.youtubeinmp3.com/widget/button/?video=https://www.youtube.com/watch?v= '. $ vid.' '& color = 555555>';
exit ();
?>
</ div>
Api break.tv (here I want to put)
<iframe src = "//break.tv/widget/mp4/?link=https://www.youtube.com/watch?v=i62Zjga8JOM" width = "400" height = "170" scrolling = "no" style = "border: none;"> </ iframe>
Can you help me how can I do this? Thank you very much in advance!
In the API docs there is a section for MP4, it looks like this:
break.tv/widget/mp4/?link=https://www.youtube.com/watch?
v=i62Zjga8JOM" width="400" height="170" scrolling="no" style="border:none;">
I have an iframe that I would like to automatically refresh itself without doing a whole page refresh. I would prefer to use javascript or jquery. This is what I have been trying unsuccessfully.
<div class="Widget"><!--DARK SKY-->
<div class="WidgetHeader">
<img src = "images/WidgetHeaders/DarkSky.png"></div>
<div id="DarkSky" style="width: auto; height: 245px; padding: 5px; background-color: hsla(0,0%,100%,.9);">
<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=38.269571&lon=-85.487420&name=Louisville&units=us&color=#4c7cba"> </iframe>
</div>
</div>
<script type = "text/javascript">
window.onload = function() {
setInterval(function refreshDarkSky() {
document.getElementById("#forecast_embed").src ="http://forecast.io/embed/#lat=38.269571&lon=-85.487420&name=Louisville&units=us&color=#4c7cba"
}, 90000);
}
</script>
if iframe is not from different domain, you can use:
document.getElementById('forecast_embed').contentDocument.location.reload(true);
for cross domain,
var iframe = document.getElementById('forecast_embed');
iframe.src = iframe.src;
try this code
$(document).ready(function () {
setInterval(function refreshDarkSky() {
$("#forecast_embed").attr("src","http://forecast.io/embed/#lat=38.269571&lon=-85.487420&name=Louisville&units=us&color=#4c7cba");
}, 90000);
});
Use this:
$('#forecast_embed',window.parent.document).attr('src',
$('#forecast_embed',window.parent.document).attr('src'));
It has to untie your issue.
try this
window.top.location.reload();
I am making a search engine and I have a few issues with my iframe. When a user clicks enter, an iframe is created. I want the iFrame to get as much height as it needs so it blends in with the rest of the page. Here is my code:
<input type="search" id="q" name="q"/>
<input type="submit" value="Search" onclick="submit(); return false;"/>
<script>
function submit() {
page.innerHTML = '<iframe id="results" src="" frameborder="0" scrolling="no" style="overflow:hidden; overflow-x:hidden; overflow-y:hidden; height:150%; width:99%; position:absolute;" height="150%" width="99%" onload=""/>';
document.getElementById('results').src = 'search.php?q=' + query + '&session=<?=$custom_session;?>&no-cache=' + Math.random();
}
</script>
This is a cut down version of the script. The actual page is located at - http://v1k.me/search/alpha/
If you look at the HTML, you will be able to see the whole code.
If you search "mobile", the results will be cut off at 9th result (http://i.imgur.com/jjZKCjC.png), however if you search say "mail", it will display everything and will stop halfway of the page list.
Try this:
<iframe id="results" src="" onload="autosize('results')"></iframe>
<script>
function autosize(ifrId){
var ifr = document.getElementById(ifrId);
var doc = ifr.contentDocument ? ifr.contentDocument : ifr.contentWindow.document;
var obj = ifr.style ? ifr.style : ifr;
obj.height = doc.body.scrollHeight + "px";
}
</script>
I have a jsp page with iframe in it.
for example: worklist.jsp
<html>
<head>
<body>
<iframe height="15%" marginheight="0px" marginwidth="0px" scrolling="no" src="menuBanner.jsp" style="border:0; padding: 0px; position:absolute;" width="960px">
</iframe>
<div><button data-dojo-type="dijit.form.Button" value="Reload" id="reload" onclick="reload();">Reload</button></div>
</body></head></html>
On click of a button, i need to reload only iframe page.
I tried the below script, but its reloading the whole page(worklist.jsp)
function reload(){
location.reload();
}
You can update/refresh the iframe by setting the src to the current src.
Here is an example.
var test = document.getElementById('iframeId');
test.src = iframe.src;
This way works for cross domain. The example in the comments are less hacky if iFrames are on the same domain.
function reload( {
document.getElementById('iFrameID').contentDocument.location.reload(true);
}
you can try:
var iframe = document.getElementById('YourIFrameId');
iframe.src = iframe.src + '?c=' + Math.random();
i think without changing the src attribute you will not be able to reload your iframe.
You can do like this.
Get the iframe src and assign again to the src of the iframe
<script>
function test()
{
$('#subpage_frame').attr('src',$('#subpage_frame').attr('src')) ;
}
</script>
<iframe src="test.com" onload="Loaded();" id="subpage_frame"></iframe>
<button onclick="test();">Refresh button</button>