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.

How to load `google map` to `div` directly to container?

I require to load a map to my page. I have the URL for that which is :
https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en
if I paste the above url, I am getting the map loaded in the browser.
Same way I am trying to load this map in to my web page. But nothing loads..
what is the correct way to load the above map in to my web page?
Here is my try:
$(function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").load(mapURL);
});
Live Demo

Url is not directly load on div .So you can append iframe on div like this to load map.
$(function() {
var html = '<iframe src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en"></iframe>';
$("#map").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'><map>
<div id='map1'><map>
Or If you don't want to use iframe you cane use embed tag.
var html='<embed src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width=200 height=200 />';
$("#map").append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>

You can trigger DIV load Event
HTML iframe Tag
The tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
$(function(){
$('div[onload]').trigger('onload');
});
function displayMap() {
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").append("<iframe src=" + mapURL +"></iframe>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div onload="displayMap()" id ="map"></div>
You can display your map without iframe
HTML object Tag
The tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
<div>
<object type="text/html" data="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width="800px" height="300px" style="overflow:auto;border:1px solid">
</object>
</div>
Difference between and tag

Try this,
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<iframe src="'+mapURL+'" height="450" width="600"></iframe>');
});
OR
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<object data="'+mapURL+'" width="600" height="450" type="text/html">Loading Map</object>');
});
OR
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<embed id="map" src="'+mapURL+'" width=600 height=450 />');
});

JS button pressed and resize iframe

When i pressed a button in the iframe, it disappears the tag but doesnt resize the iframe size. when the ajax is done should call the AjustResizeIframeHeight method in the other page
Any suggestion to do that?
UPDATE
page with iframe
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
<iframe id"form-iframe" width="100%" style="border: none" src="{{ notes }}" onload='javascript:resizeIframe(this);'>
</iframe>
content the iframe:
<a href="#" onclick="xpto2(1,{{ n.id }});parentNode.parentNode.removeChild(parentNode)" >Don't show again</a>
<script>
function xpto2(status,noteid) {
var request = $.ajax({
....
});
request.done(function() {
window.parent.AdjustIframeHeight();
});
}
</script>
Added the window.parent.AdjustIframeHeight() in the ajax function, but it says "unresolved function or method"

When you AJAX call is done, it does nothing because you have an empty function.
getElementById("form- iframe") will find nothing because there is no element with id form- iframe.
If the page in your iframe has the same host, protocol and port, you should be able to access the function via window.parent.AdjustIframeHeight().
If host, protocol or port do not match, you have to use Window.postMessage from your iframe and listen for message events on the parent page.

Solved
The solution was to add a div and then call the div to the method
page with iframe
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function AdjustIframeHeight(i) {parent.AdjustIframeHeight(document.getElementById("page").scrollHeight);
</script>
<iframe id"form-iframe" width="100%" style="border: none" src="{{ notes }}" onload='javascript:resizeIframe(this);'>
</iframe>
content the iframe:
<div id="page">
<a href="#" onclick="xpto2(1,{{ n.id }});parentNode.parentNode.removeChild(parentNode)" >Don't show again</a>
<\div>
<script>
function xpto2(status,noteid) {
....
});
request.done(function() {
request.done(function() {
parent.AdjustIframeHeight(document.getElementById("page").scrollHeight);
});
}
</script>

Refresh an iframe without refreshing the entire page

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();

Hide form from parent page until specific iframe element ID loads

All I need is to show parent page form only if specific element ID loads inside iframe. parent/iframe are on the same domain. How can I achieve that using javascript?
<form id="Search" action="../search.php" target="my-iframe" method="post">
<input type="text" id="location" name="keywords[all_words]" />
<a href="#" onclick="document.getElementById('Search').submit()" >Search</a>
</form>
<iframe id="myiframe" src="../page.html" name="myiframe" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>

You can use jQuery to attach a load event to the iframe. Here's a working example: http://jsfiddle.net/kPqbS/

You can use something like this:
// wait for the page to finish loading
window.onload = function(){
// hide your form
document.getElementById('Search').style.display = 'none';
// get the document of the iframe
var frameDocument = document.getElementById('myiframe').contentWindow.document;
// if this is true the element with id 'test' is in the frame
if(frameDocument.getElementById('test')){
// show your form
document.getElementById('Search').style.display = 'block';
}
}