We Keep Coding

Adjust height of iframes of cross-origin-domains

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.

What is the correct syntax for an iframe embed with pug

I'm trying to add the sightmap embed script (below) into a pug file. I've come up with this, but it is breaking the page:
script(src="https://sightmap.com/embed/api.js")
iframe( id="sightmap" width="100%" height="700px" style="border: 1px solid #cccccc;" src="https://sightmap.com/embed/sightmaphere?enable_api=1&origin=https://www.propertydomain.com/" frameborder="0")
script.
var embed = new SightMap.Embed('sightmap');
embed.on('ready', function() {
}
embed.on('outbound.thriveKnock.click', function(event) {
knockDoorway.openScheduling();
}
Here is the original script for the iframe:
<!-- Engrain/Knock Map/CTA -->
<script src="https://sightmap.com/embed/api.js"></script>
<iframe id="sightmap" width="100%" height="700px" style="border: 1px solid #cccccc;" src="CURRENT-SIGHTMAP-URL-HERE?enable_api=1&origin=https://propertydomain.com" frameborder="0"></iframe>
<script type="text/javascript">
// Create a new embed instance, providing the IFrame id value
var embed = new SightMap.Embed('sightmap');
embed.on('ready', function() {
});
// Outbound Link API
embed.on('outbound.thriveKnock.click', function(event) {
// Open Knock Scheduler
knockDoorway.openScheduling();
});
</script>
<!-- End Engrain/Knock Map/CTA -->
Thanks very much.

How to change Iframe height when clicked on button inside the iframe's content

Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function ChangeHeightF1()
{
$("#inneriframe").css({"height":"350px;"});
alert('The height was changed!');
}
</script>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the code of the button which is in the content of the iframe:
<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>
So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.
Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?
Thanks in advance!

You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.
$(":button").click(function(){
$('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});
})

This should work. If you want to re size back to previous height, let me know.
http://jsfiddle.net/ko3pyy8c
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#more').click(function(){
$('#inneriframe').animate({height:'500px'}, 500);
$('#more').text('Go Back');
});
});
</script>
<style type = "text/css"/>
#inneriframe {
height: 350px;
overflow: hidden;
}
</style>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
Change Height

it can help you
<a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
by using jquery
$('a').click(function(){
$('iframe').css('height','600px');
});

Reload iframe using javascript

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>

Play embeded youtube video JS

I am embedding a youtube video using the iframe tag, but am unsuccessful at accessing the object's play functionality. Here is how I am loading the object:
<iframe id="player" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com"
frameborder="0">
I've referenced the APIs, but I don't really understand how to access the play/pause functionality. I have tried using jquery as follows, but the captured object doesn't have the desired attributes:
vid = $('#player')
vid.playVideo() // doesn't work
I have also tried using the swfsobject as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/embed/ngf03kCRw3s",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
However, nothing appears on the page (and there are no errors in the console). Help is appreciated, Thanks,

A simple way to play an embedded YouTube video with jQuery (and JS) is by appending the parameter "autoplay=1" to the src attribute of the iframe.
In your case, the code would be something like this:
$("#player")[0].src += "&autoplay=1";
Another example by Martin Wolf:
$(document).ready(function() {
$('#play-video').on('click', function(ev) {
$("#video")[0].src += "&autoplay=1";
ev.preventDefault();
});
});
body {
padding: 30px;
}
a {
display: inline-block;
margin-bottom: 20px;
color: #000;
font-family: Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
And that's it. The video will start to play.
If someone needs the solution in Vanilla JS please leave a comment and I'll come back to update the answer when I have some extra time.