How to put an iFrame with a QueryString appended in its src in the ContentEditorWebPart?

Question

I have a SharePoint site Page in which i need to put an iFrame element to display a web page.To achieve that I wrote some html and javascript within CDATA tag inside the Content section of a ContentEditorWebPart as follows.

<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">
<![CDATA[
<iframe width="100%" id="mySitecontainer" src="https://mywebsite/Login.aspx?loguser=" frameborder="0" > </iframe>
<script type="text/javascript">
    var lusr = getLoggedUser(); 
    var requiredUrl = "https://mywebsite/Login.aspx?loguser=" + lusr;
    $('#mySitecontainer').attr('src',requiredUrl);
</script>
]]>
</Content>

Here the getLoggedUser() function is inside an external js file for which I have added a reference earlier.

Now the problem is the above script is not working sometimes, especially whenever I refresh the SharePoint site page in the browser and the src of the above iFrame element is being rendered without any querystring parameter(loguser in this case). Can someone help me where I did wrong here?

Answer 1

SharePoint may re-write your code in the content editor webpart. I suggest you take one of two approaches:

In 2010/2013 you can create a txt file and store in a library. I suggest you place your code in that file and use the Content Link property of the Content Editor Web Part. This will avoid SharePoint overwriting your code or doing something funky behind the scenes as it parses the CEWP. This also makes it easier to test and debug from the browser as you don't have to edit the page to see to your changes.

In 2013 - you also have the Script Web Part. You can put your HTML in the content editor web part and then your javascript in the script web part. you still need to add in the <script></script> tags when using this web part.

I've found using the content editor web part directly with embedded code can be tricky. In some cases where your JavaScript changes the HTML, that can actually get saved back to the content editor web part. I've seen this for instance when embedding a twitter feed, where the DIV placeholders are replaced with actual layout code that is injected via JavaScript.

Answer 2

May your problem is caused by MDS (minimal download strategy). Since your code is on the page but is not interpreted again, you have to attach it to the page lifecycle.

For example with JQuery:

$(function () {
      ExecuteOrDelayUntilScriptLoaded(function () {
          if (typeof asyncDeltaManager != "undefined")
            asyncDeltaManager.add_endRequest(myFunction);
          else myFunction();
      }, "start.js");

  });

function myFunction() {
  //your code
}

Here's some reference for this.

Or without it:

function $_global_customjs(){ 
    _spBodyOnLoadFunctionNames.push('DoSomething'); 
} 
    var DoSomething = function () 
    { 
        // --- Your custom JS here 
    } 
$_global_customjs();

Here's some reference for this.

Answer 3

The Content Editor Web Part is intended for adding HTML content to a Web Part Page, it is not designed to link to a Web site. If you need to link to a Web site, consider using the Page Viewer Web Part. -Microsoft- http://office.microsoft.com/en-us/windows-sharepoint-services-help/about-the-content-editor-web-part-HA001160897.aspx