3

I have a script editor web part on a page in my site. I have the following code in it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>    
<script type="text/javascript">
    $( document ).ready(function() {
        document.getElementById("myframe").style.height=$('#myframe').contents().find('#divContent').clientHeight;
    });
</script>

Currently it is meant to change the height of an iFrame based on the size of the contents inside. It is currently not changing anything.

Why would this snippet not run when the page is loaded and set the size of the frame?

EDIT:

<iframe width='90%' src='//????.sharepoint.com/sites/test/AppBrightBanner/Pages/BannerAppPart.aspx?ASpeed=500&PauseTime=4000&Effect=random&NavThumbs=false&ThemeColor=rgb(0%2C%20114%2C%20198)&ThemeStyle=bar' 
frameborder='0' scrolling='no' seamless id="myframe"></iframe>

iFrame which is being used and when added to a content editor is being stuck at 150px in height, but when not in editor it is completly stripped and not viewable.

HTML from F12. Are these classed as outside the iframe?

enter image description here

  • You are referencing the iframe and the div within the iframe with ID ("#" used in the selector). Can you check whether that the div in the iframe has ID "divContent"? – Suleyman May 4 '16 at 10:40
  • Added a snippet of the layout when the page has loaded. I am now not sure if this is classed as being inside the iframe or outside... – James Michael Lucas May 4 '16 at 10:49
  • Looks OK. You are refer it the right way. It can be that the iframe content is not ready when you try to get the height of the div. Can you change the script between the document ready to: alert($('#myframe').contents().find('#divContent').clientHeight). This should alert the height of the divContent. – Suleyman May 4 '16 at 11:28
1

I was able to address this by changing some of the initial script to firstly run when the frame has loaded.

<script type="text/javascript"> 
document.getElementById("myframe").onload = function()
{
    var x = document.getElementById("myframe");
    var height = height=document.body.clientHeight;
    document.getElementById("myframe").height = parseInt(height-document.getElementById("myframe").offsetTop-8)/1.9+"px";
}
</script>

I have learnt I cant dynamically set the height for my frame from the content inside because they are on different domains (sub domains count as seperate unfortunately).

0

There are few reason that might preventing your code to run

  • Check jQuery reference added in your script editor.

  • If you have added jQuery reference and still it is not working try your code by placing it in Content Editor WebPart.

If you still face issue then track console in debugger of browser. And let me know if solved you issue.

Thanks

  • Neither of those options seem to have worked, I have added this reference <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> but it does not work in either. – James Michael Lucas May 4 '16 at 10:22
0

You might be missing the jQuery reference on your page.

Also make sure the IDs of the content are correct.

Open the browser's console and check what exception you get. :)

EDIT:

As I understood, you are trying to resize the iframe to fit it's contents. The reason why your code doesn't work is taht #divContent is not actually on the page (it's in the iframe).

Tkae a look at this question and it's answers

  • I have added the reference which is in my edit and all the id's are correct. The console is now not complaining but the height is still not being set to the correct value. – James Michael Lucas May 4 '16 at 10:26
  • Can you provide us with your html structure? – Gintas K May 4 '16 at 10:29
  • I have edited my inital question to answer this, – James Michael Lucas May 4 '16 at 10:38
  • @JamesMichaelLucas , is #divContent inside the iframe? or is it on the current page? – Gintas K May 4 '16 at 10:42
  • Another update in my main section. I am now not sure if this classes as indie the iframe or not. – James Michael Lucas May 4 '16 at 10:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.