Skip to content

Instantly share code, notes, and snippets.

@dcinzona
Last active May 5, 2017 12:51
Show Gist options
  • Select an option

  • Save dcinzona/0bc51f5ea24a71f27950d1266bc95b12 to your computer and use it in GitHub Desktop.

Select an option

Save dcinzona/0bc51f5ea24a71f27950d1266bc95b12 to your computer and use it in GitHub Desktop.
Self-resizing iframes for Salesforce

##Quick instructions:

  1. Make a canvas app that loads the VF page VisualForceIFrameWrapper.page and pre-approve it for all profiles
  2. Add that canvas app to your page layout
  3. Profit
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div style="height:300px;">hello</div>
<script>
window.addEventListener('message',function(event) {
//if(event.origin !== 'https://davidwalsh.name') return;
console.log('message received: ' + event.data,event);
var height = $('html').height();
event.source.postMessage(height + 'px',event.origin);
},false);
</script>
</body>
</html>
<apex:page standardController="Account" tabStyle="Account" showHeader="false" sidebar="false">
<!-- Begin Default Content REMOVE THIS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/canvas/sdk/js/canvas-all.js" ></script>
<script src="/canvas/sdk/js/publisher.js" ></script>
<iframe id="iframe" src="https://dcinzona.github.io/iframe_poc/index.html" frameborder="false" height="200px" width="100%"></iframe>
<script>
$(function(){
// Gets a signed request on demand.
Sfdc.canvas.client.refreshSignedRequest(function(data) {
if (data.status === 200) {
var signedRequest = data.payload.response;
var part = signedRequest.split('.')[1];
var obj = JSON.parse(Sfdc.canvas.decode(part));
console.log(obj);
var iframe = $('#iframe');
//periodical message sender
var domain = 'https://dcinzona.github.io';
var check = setInterval(function(){
var message = 'What size should I set?';
console.log('vfpage: sending message: ' + message);
var frame = document.getElementById('iframe').contentWindow;
frame.postMessage(message,domain); //send the message and target URI
},1000);
function receiveMessage(event){
console.log(event);
if (event.origin !== "https://dcinzona.github.io")
return;
clearInterval(check);
console.log(event.data);
iframe.height(event.data);
Sfdc.canvas.client.resize(obj.client, {height : event.data});
}
window.addEventListener("message", receiveMessage, false);
}
});
});
</script>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment