Hello,
I was able to embed a site into an iframe that would prompt the user to login in order to see the site in the iframe by using the modern script editor. However, the prompt is no longer appearing and instead the users are automatically seeing the custom error screen in the iframe without receiving a login prompt first.
Here is what I am using:
<!-- Reference - modern javascript editor - -->
<div id="Container" style= "frameborder=0; position:relative; display:block; max-width: 500px;
margin-left: auto;
margin-right: auto;">
<style>/*setContainerBG to Not White on Mobile*/ @media screen and (max-width:1365px){.root-80 .CanvasSection .ControlZone--control{ max-width: 380px; margin-left: auto; margin-right: auto;}}</style>
<iframe id="ourIframe" width="100%" height="650px" max-width="500px" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type='text/javascript'>
function isSiteOnline(url,callback) {
// try to load favicon
var timer = setTimeout(function(){
// timeout after 5 seconds
callback(false);
},70000)
var img = document.createElement("img");
//myimg.id ="myImage";
img.onload = function() {
clearTimeout(timer);
callback(true);
// alert(true);
}
img.onerror = function() {
clearTimeout(timer);
callback(false);
// alert(false);
}
//this image has to exist on the myinfo inside server
//to prove that it is online otherwise the message will
//always show that it is offline
img.src=url+"/MyInfo_header.jpg";
}
jQuery(document).ready(function(){
console.log( "ready!" );
isSiteOnline("url for my site",function(found){
if(found) {
//alert("online");
document.getElementById('ourIframe').src="url for my site";
}
else {
// site is offline (or favicon not found, or server is too slow)
//alert("offline");
document.getElementById('ourIframe').src="/SitePages/Error.aspx";
}
})
})
</script>
Thanks,
