Clarity

Expand all | Collapse all

Issue with iFrame - Works in Chrome!

  • 1.  Issue with iFrame - Works in Chrome!

    Posted 07-11-2016 01:00 PM

    I have created an iframe in an HTML portlet.  The source is another Clarity page, but for reasons that are too involved to get into, we required it to be shown in an iframe.

    We are constructing the source link using javascript and it works like a charm in Chrome.  However, it is not loading the iframe content in Firefox or IE.  It is *not* due to a security issue with domains and I would assume if Clarity was disallowing it, it would have barfed in Chrome as well.  No errors shown on the developer tools (though on IE it showed an additional nested <html><head><body> sequence - all blank - within the iframe tags.  Weird.

    Any suggestions welcome.

    Cheers

    Andrea



  • 2.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-11-2016 02:10 PM

    Can you post the code you are generating the link with? Without more info we can only guess, but my first though would be an issue with the urlencoding/decoding, it may not be converting the characters properly for the Clarity URL and Chrome might just be more forgiving in figuring it out.



  • 3.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-12-2016 06:20 AM

    Here is the script...

    Note that it works in both our http and https environments - in Chrome.

    <html>

    <head>

     

       

      <script type="text/javascript">

     

     

      function getiFrame()

      { 

                             

                document.write('<br><a href="nu#action:npt.overview"><button class="ppm_button">Return to Overview</button></a>'); 

      document.write('<div id="SkillsUpdate">  <div style="height:950px;"> <iframe id="SkillsUpdateIF" src="' + skillpage + '" scrolling="no" frameborder="5" height="100%" width="100%" style="position:absolute; clip:rect(112px,1100px,900px,0px); top:-60px"></iframe>  </div>');

                             

                }

                          

          </script>

     

     

    </head>

     

      <body>

      <script type="text/javascript">

        var url = document.URL;

      var resid = url.substr(url.indexOf("resid=")+6, 7);

      var url1 = "nu#action:projmgr.editResourceReturn&odf_view=resource.custom_skills&id=";

      var url2 = "&odf_pk=";

      var url3 = "&return_to=custom_close";

      var skillpage = url1 + resid + url2 + resid + url3;

     

     

      getiFrame();

     

     

       

      </script>

     

     

    </body>

    </html>



  • 4.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-12-2016 10:32 AM

    When you look at the source after its generated, what do you end up with in the iframe src attribute? If you have the console open, do you get any javascript errors?



  • 5.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-12-2016 11:32 AM

    No errors that I can see.  IFrame is present and accounted for in the code - just not actually showing.  :/



  • 6.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-12-2016 03:44 PM

    So you might be facing a dom loading issue.

     

    Try this:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function getiFrame()
    { 
      var url = document.URL;
      var resid = url.substr(url.indexOf("resid=")+6, 7);
      var url1 = "nu#action:projmgr.editResourceReturn&odf_view=resource.custom_skills&id=";
      var url2 = "&odf_pk=";
      var url3 = "&return_to=custom_close";
      var skillpage = url1 + resid + url2 + resid + url3;
    
      var iframe = document.getElementById('SkillsUpdateIF');
      iframe.src = skillpage;
    }
      </script>
    
    <title></title>
    </head>
    <body onload="getiFrame();">
      <br>
      <a href="nu#action:npt.overview"><button class="ppm_button">Return to Overview</button></a>
      <div id="SkillsUpdate">
        <div style="height:950px;">
          <iframe id="SkillsUpdateIF" src="" scrolling="no" frameborder="5" height="100%" width="100%" style="position:absolute; clip:rect(112px,1100px,900px,0px); top:-60px"></iframe>
        </div>
      </div>
    </body>
    </html>
    

     

    or this:

     

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body onload="getiFrame();">
      <br>
      <a href="nu#action:npt.overview"><button class="ppm_button">Return to Overview</button></a>
      <div id="SkillsUpdate">
        <div style="height:950px;">
          <iframe id="SkillsUpdateIF" src="" scrolling="no" frameborder="5" height="100%" width="100%" style="position:absolute; clip:rect(112px,1100px,900px,0px); top:-60px"></iframe>
        </div>
      </div>
     <script type="text/javascript">
      var url = document.URL;
      var resid = url.substr(url.indexOf("resid=")+6, 7);
      var url1 = "nu#action:projmgr.editResourceReturn&odf_view=resource.custom_skills&id=";
      var url2 = "&odf_pk=";
      var url3 = "&return_to=custom_close";
      var skillpage = url1 + resid + url2 + resid + url3;
    
      var iframe = document.getElementById('SkillsUpdateIF');
      iframe.src = skillpage;
      </script>
    </body>
    </html>
    

     

    V/r,

    Gene



  • 7.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-12-2016 03:48 PM

    Another thing you could do is open in the other browser and fire up the development tools (usually F12).  Then place a break point at the start of your JavaScript.  Refresh the page and step through your code to see what is set in the skillpage variable.

     

    V/r,

    Gene



  • 8.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-15-2016 06:33 AM

    Tried both your scripts.  Worked in Chrome - but once again - thwarted in IE and Firefox.

    It seems to be blocking everything involving iframes.  I have plenty of other portlets that use scripting with no issues.

    Very frustrating. 

    The whole idea is to show the resource subpage with the toolbars clipped off (to keep the resource from navigating within the object.)  Argh.



  • 9.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-15-2016 11:00 AM

    So in Firefox  which symbol do you see when on the page with the iframe?  It should be a green lock.

     

    If it is a any thing else (most likely mixed content), I would go to developer mode (press F12), refresh the page with the iframe and then click on the console tab in the developer window.  This should show you what is happening with your iframe.

     

     

    How to fix a website with blocked mixed content - Web security | MDN

     

    V/r,

    Gene



  • 10.  Re: Issue with iFrame - Works in Chrome!

    Posted 07-18-2016 07:03 AM

    There is only the Info icon.  However, it is not mixed content.  It is referencing another Clarity page.



  • 11.  Re: Issue with iFrame - Works in Chrome!

    Former Employee
    Posted 07-25-2016 04:31 PM

    Hi Andrea_McVey - Were you ever able to figure this out? Thanks!