OneDrive Picker Framing

by Thomas Michon

HTML

<button id="openPicker">Open Picker</button>
<button id="hostPicker">Host Picker</button>

<pre id="output"></pre>

<iframe id="frame" />

CSS

#frame {
  width: 640px;
  height: 480px;
}

JavaScript

var openPicker = document.getElementById('openPicker');
var hostPicker = document.getElementById('hostPicker');
var output = document.getElementById('output');
var frame = document.getElementById('frame');

openPicker.addEventListener('click', function () {
	var childWindow = window.open(
  	'https://microsoft-my.sharepoint.com/personal/nicabeen_microsoft_com/_layouts/15/OneDrive.aspx?p=2&picker={"sdk":"7.2","o":"https://fiddle.jshell.net","id":"abcdef"}',
    '_blank',
    'scrollbars=yes,width=640,height=480'
    );
  childWindow.opener = undefined;
  
  var messageListener = function (event) {
  	var data = '' + event.data;
    
    output.textContent = data;
  };
  
  window.addEventListener('message', messageListener);
  
  let intervalId = setInterval(function () {
  	if (childWindow.closed) {
    	clearInterval(intervalId);
      
      window.removeEventListener('message', messageListener);
    } else {
    	childWindow.postMessage('[OneDrive-ToPicker]' + JSON.stringify({
      	pickerId: "abcdef",
        type: "activate"
      }), 'https://microsoft-my.sharepoint.com');
    }
  }, 200);
});

hostPicker.addEventListener('click', function () {
	var url = 'http://spjoerel/my/personal/tmichon_microsoft_com/_layouts/15/OneDrive.aspx?p=2';
  
  frame.src = url;
});