Hello.
<!DOCTYPE html>
<html>
<head>
<script id="oil-configuration" type="application/configuration">
{
"publicPath": "https://oil.axelspringer.com/release/1.2.1"
}
</script>
<script>
/*! 1.2.1-RELEASE */!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="//oil.axelspringer.com/release/1.2.1/",n(n.s=115)}({115:function(e,t,n){"use strict";!function(e,t){e.__cmp||(e.__cmp=function(){function n(){return!(!e.AS_OIL||!e.AS_OIL.commandCollectionExecutor)}(e.attachEvent||e.addEventListener)("message",function(t){e.__cmp.receiveMessage(t)},!1),function e(){if(!(t.getElementsByName("__cmpLocator").length>0))if(t.body){var n=t.createElement("iframe");n.style.display="none",n.name="__cmpLocator",t.body.appendChild(n)}else setTimeout(e,5)}();var r=[],o=function(o,a,c){if("ping"===o)!function(e){if(e){var r=!0,o=t.querySelector('script[type="application/configuration"]#oil-configuration');if(null!==o&&o.text)try{var a=JSON.parse(o.text);a&&a.hasOwnProperty("gdpr_applies_globally")&&(r=a.gdpr_applies_globally)}catch(e){}e({gdprAppliesGlobally:r,cmpLoaded:n()},!0)}}(c);else{var l={command:o,parameter:a,callback:c};r.push(l),n()&&e.AS_OIL.commandCollectionExecutor(l)}};return o.commandCollection=r,o.receiveMessage=function(e){var t=e&&e.data&&e.data.__cmpCall;t&&r.push({callId:t.callId,command:t.command,parameter:t.parameter,event:e})},o}())}(window,document)}});
</script>
<script type="text/javascript" src="https://oil.axelspringer.com/release/1.2.1/oil.1.2.1-RELEASE.min.js"></script>
</head>
<body>
<iframe src="http://localhost:8081/iframe.html">
</iframe>
<script type="text/javascript">
// Workaround we use to try and fix below
// function cmpMsgHandler(event) {
// var msgIsString = typeof event.data === "string";
// var json = msgIsString ? JSON.parse(event.data) : event.data;
// if (json.__cmpCall) {
// var i = json.__cmpCall;
// window.__cmp(i.command, i.parameter, function(retValue, success) {
// var returnMsg = {"__cmpReturn": {
// "returnValue": retValue,
// "success": success,
// "callId": i.callId
// }};
// event.source.postMessage(msgIsString ?
// JSON.stringify(returnMsg) : returnMsg, '*');
// });
// }
// }
// var result = null
// window.__cmp('ping', null, function(res) { console.log(res); result = JSON.stringify(res) })
// document.querySelector('.test').innerHTML = result
//window.addEventListener('message', cmpMsgHandler)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
This is an iframe
<script type="text/javascript">
// find the CMP frame
var f = window;
var cmpFrame;
while (!cmpFrame) {
try {
if (f.frames["__cmpLocator"]) cmpFrame = f;
} catch (e) {
console.log("Catched: ", e)
}
if (f === window.top) break;
f = f.parent;
}
var cmpCallbacks = {}
/* Set up a __cmp function to do the postMessage and
stash the callback.
This function behaves (from the caller's perspective)
identically to the in-frame __cmp call */
window.__cmp = function (cmd, arg, callback) {
if (!cmpFrame) {
console.log("no cmpFrame")
callback({ msg: "CMP not found" }, false);
return;
}
console.log('have cmpFrame')
var callId = Math.random() + "";
var msg = {
__cmpCall: {
command: cmd,
parameter: arg,
callId: callId
}
};
cmpCallbacks[callId] = callback;
cmpFrame.postMessage(msg, '*');
}
/* when we get the return message, call the stashed callback */
window.addEventListener("message", function (event) {
console.log('message')
var json = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
if (json.__cmpReturn) {
var i = json.__cmpReturn;
cmpCallbacks[i.callId](i.returnValue, i.success);
delete cmpCallbacks[i.callId];
}
}, false);
/* example call of the above __cmp wrapper function */
__cmp("ping", null, function (val, success) {
console.log("val=", val, " success=", success)
});
</script>
</body>
</html>