Using Iframe in Service portal

[salomesimpsone]

Hi all,

I am learning about service portal

what I am trying is to display an external page(e.g google,...)using iFrame in service portal.

So, I created a widget and included the iframe as below

<iframe src="http://www.w3schools.com" height="500px" width="500px"></iframe>

but expected page is not getting displayed and the iframe is blank

How to use iframe in service portal??

Thanks in advance

[Brad Tilton]

I think what we're saying is that showing that specific content isn't possible because it looks like they've blocked that functionality.

[salomesimpsone]

okk....Thanks You

[ark6]

Hi Salome,

Without using an iframe, you can use something like below. Just give it a try,it may help

<div>
    <object type="text/html" data="http://www.w3schools.com/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
</div>

[salomesimpsone]

thanks arka..

Unfortunately it is not working

Thanks again

[philgill]

Hi Salome,
  I too have been battling with this issue. You can load an Iframe on Service Portal whether it is best practice is up for debate. So far it does seem that Brad is right and you should avoid it doing but that was not really your question. Here is some of the code that I have been playing with and hopefully someone stumbles across this post and has a clever solution for this problem.

First the HTML:
<iframe id="knowledge_iframe" style="width:100%;border:0;" scrolling="no"/>

Second the Client JS:

function() { /* widget controller */ var c = this; var frame_src = "https://{{your-instance}}.service-now.com/home.do?sysparm_userpref_homepage=8b8aa066c611228901698cbe24ffd91e",     frame_id = "knowledge_iframe",     frame_el = document.getElementById('knowledge_iframe'), frame_win; // BEFORE you set the iframe src, apply an onload function to the iframe element frame_el.onload = function() {     // Onload, you can access the frame's contents and do whatever you want     frame_win = frame_el.contentDocument; var x = document.getElementById("knowledge_iframe"); var y = x.contentWindow.document; y.body.style.backgroundColor = "blue";     console.log("y.body.scrollHeight   ", y.body.scrollHeight); document.getElementById("knowledge_iframe").style.height = y.body.scrollHeight + "px"; } frame_el.src = frame_src; }

No need for any server script. Judging though that you had some trouble with your test w3Schools Iframe loading I would make sure that you have correctly placed you widget in the correct instance on the service portal page that you are rendering. As you can I place an onLoad function on the Iframe but I am unfortunately getting some unexpected behavior. I believe due to the asynchronous behavior of the page I am rendering (the ITIL Hompage) my iframe's height gets cut short. That is why I attempting to grab the scroll height of the page prior it being rendered so that I can manually/dynamically set the height to fit the contents of the frame. The asynchronous behavior is unfortunately giving me a variety of heights that are not consistent with the actual content. Hopefully someone can help us both out.