Javascript iframe isn't running correctly

Question

I recently figured out how to get 5 different documents loaded into tabs as iframes.. or at least I got one of them to work. Example:

The others are blank for some reason, but still take up the same size in the tab:

Each of the tabs is just a content editor running the following script:

    <html>
<head>
    <script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

        function retrieveListItems() {
            //retrieve the document library's name
            var parameter = GetUrlKeyValue('ProjectName'); //get the parameter name, tested and it works

            var clientContext = new SP.ClientContext(); //create client context at this site collection.
            var oList = clientContext.get_web().get_lists().getByTitle('ProjectParameters'); //create list object by the title of the, projectParameters is the list to look through
            var camlQuery = new SP.CamlQuery(); //create CAMLquery to pull in list items.
            camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'LinkTitle\'/>' + 
            '<Value Type=\'Computed\'>' + parameter + '</Value></Eq></Where></Query></View>' + 
            '<RowLimit>10</RowLimit></View>'); //define the query, here we pull in the field where the parameter matches. 
            this.collListitem = oList.getItems(camlQuery);//get the items from the list object based on the query defined above.

            clientContext.load(collListitem);//telling the object model to prepare to execute the following object by loading it into the client context.

            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  


        }
        function onQuerySucceeded(sender, args) {
            //var ProjectCharter = '';
            //var ActionPlan = '';
            //var MonthlyReport = '';
            //var ProjectSchedule = '';
            var Budget = '';

            var listItemEnumerator = collListitem.getEnumerator();

            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                //ProjectCharter += oListItem.get_item('Project_x0020_Charter');
                //ActionPlan += oListItem.get_item('Action_x0020_Plan');
                //MonthlyReport += oListItem.get_item('Monthly_x0020_Report');
                //ProjectSchedule += oListItem.get_item('Project_x0020_Schedule');
                Budget += oListItem.get_item('Project_x0020_Budget');
            };
            var docUrl= Budget;//set the doclibname to the pulled field

            modIframe(docUrl);
        }

        function onQueryFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
        function modIframe(DocumentLibraryUrl){
            document.getElementById('doclibView').src=DocumentLibraryUrl;
        }

    </script>
</head>
<body>
    <iframe src='' height=600 width=900 id='doclibView'>
    </iframe>
</body>

All I changed between the 5 was uncommenting/recommenting the variables, then fixing the docUrl. This script pulls from the following list depending on the parameter passed. The parameter I use is projectName, where it can be equal to PROJ1, PROJ2, or PROJ3 (acting as a project code of sorts).

The list has the parameters in the title column, and then has 5 text columns in which the following workflow fills based on the contents of the document library:

The workflow looks like such (it just updates the projectParameters list with URLs for the iframe):

I cannot for the life of me figure out why only one of the scripts is working. I tested all of the links in ProjectParameters, and they are each valid/ working. It looks like the onQuerySucceeded method isn't getting run for some reason, as I determined using the dev tools (a console.log command inside onQuerySucceeded didn't get ran).

Update, I tested the following .aspx page created from Sharepoint designer(this won't turn into a code block I'm sorry):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%@ Page Language="C#" %> <%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Test

$(document).ready(function(){ var scriptbase = "https://projectadvocatesllc.sharepoint.com/sites/project_sb1" + "/_layouts/15/"; //Do not change the order, scripts should load by order. $.getScript(scriptbase + "init.js", function () { $.getScript(scriptbase + "SP.Runtime.js", function () { $.getScript(scriptbase + "SP.js", retrieveListItems); }); }); }); function retrieveListItems() { var parameter = GetUrlKeyValue('ProjectName'); //get the parameter name, tested and it works var clientContext = new SP.ClientContext(); //create client context at this site collection. var oList = clientContext.get_web().get_lists().getByTitle('ProjectParameters'); //create list object by the title of the, projectParameters is the list to look through var camlQuery = new SP.CamlQuery(); //create CAMLquery to pull in list items. camlQuery.set_viewXml('' + '' + parameter + '' + '10'); //define the query, here we pull in the field where the parameter matches. this.collListitem = oList.getItems(camlQuery);//get the items from the list object based on the query defined above. clientContext.load(collListitem, Include('Project_x0020_Schedule'));//telling the object model to prepare to execute the following object by loading it into the client context. clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded(sender, args) { var ProjectSchedule = ''; var listItemEnumerator = collListitem.getEnumerator(); while (listItemEnumerator.moveNext()) { var oListItem = listItemEnumerator.get_current(); ProjectSchedule += oListItem.get_item('Project_x0020_Schedule'); }; var docUrl= ProjectSchedule;//set the doclibname to the pulled field modIframe(docUrl); } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } function modIframe(DocumentLibraryUrl){ document.getElementById('doclibView').src=DocumentLibraryUrl; }

I am left with the error:

Mohamed El-Qassas MVP · Accepted Answer · 2016-10-04 22:08:21Z

It's a normal behavior, IFrame is considered as a page outside SharePoint So the page can't find the SP.js to run your code and hit onQuerySucceeded

So to use CSOM within external page , you should do the following :

Via SharePoint Designer , Add new ASPX Page
At Head Section add your code as the following

The final page sould looks like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script>


   $(document).ready(function(){
        var scriptbase = "http://epm/workflow" + "/_layouts/15/";
    //Do not change the order, scripts should load by order.  
     $.getScript(scriptbase + "init.js",
            function () {
                $.getScript(scriptbase + "SP.Runtime.js",
                   function () {
                $.getScript(scriptbase + "SP.js", execOperation);
              });
          });
           });
// **add your code**


function execOperation() {
    // get context and then username
    context = new SP.ClientContext.get_current();
    web = context.get_web();

    getUserName();
}


function getUserName() {
    user = web.get_currentUser();
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

function onGetUserNameSuccess() {
    alert('Hello ' + user.get_title());
}

function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}



<body>

<form id="form1" runat="server">
</form>
</body>

</html>

[Output]

the above code should show the current user .

So it's hit now onQuerySucceeded and can load SP.JS.

Note : the above code worked for me at ASPX Page . so you should match it with your code and make sure that the scriptbase variable is set to the correct path of your layout folder, if you face any other issue, you should check your code where the issue should not now be related to loading SP.JS

I tried to add them and it gave me errors on the URL of the script tags, saying it can't find them — Sabien Ambrose, Commented Oct 4, 2016 at 16:59
try to add the ref with your full path, I am pretty sure you should find all this script , for more checking browse the url at your site like this epm/workflow/_layouts/sp.js to make sure it's exist — Mohamed El-Qassas MVP, Commented Oct 4, 2016 at 19:17
The only one that isn't working is: contoso.sharepoint.com/_layouts/MicrosoftAjax.js.... When i put each of the URLs into the browser, they each pull up the code. — Sabien Ambrose, Commented Oct 4, 2016 at 19:51
In your code , I don't think you will need it , so don't use it , and try to check IFrame that also should be working now , and tell me if you still face issue — Mohamed El-Qassas MVP, Commented Oct 4, 2016 at 19:53
I took it out... also had to make each link https or it wouldn't load the "unsafe script"... It still isn't working after adding the script tags — Sabien Ambrose, Commented Oct 4, 2016 at 19:56

Stack Exchange Network

Javascript iframe isn't running correctly

1 Answer 1

Your Answer

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

Hot Network Questions

Javascript iframe isn't running correctly

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

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

Related

Hot Network Questions

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