Forum Stats

  • 3,780,903 Users
  • 2,254,454 Discussions
  • 7,879,490 Comments

Discussions

Making iframe src dynamic in JET page

3174772
3174772 Member Posts: 271
edited Mar 29, 2016 11:52PM in Oracle JET

Hi All,

I am new to JET and ADF. I have embedded iframe src inside JET page to render a adf page inside JET page. Now i need to make the src dynamic, need to frame the URL in a variable and then using var to call adf page in iframe. I am using jdeveloper 12.2.1 version.

Thanks

Chinmayee

3174772

Answers

  • 3174772
    3174772 Member Posts: 271
    edited Mar 28, 2016 6:04AM

    Can anyone help me out for this issue !!!!

  • Peter Flies-Oracle
    Peter Flies-Oracle Member Posts: 39
    edited Mar 28, 2016 9:03AM

    You can use the Knockout attr binding and set the src attribute.  See this article.

     

    http://stackoverflow.com/questions/8155208/how-to-data-bind-an-iframe-src-attribute

     

     

     

     

    31747723174772
  • 3174772
    3174772 Member Posts: 271
    edited Mar 29, 2016 1:59AM

    Hi Peter,

    Thanks for your reply. I have gone through your suggestion, but it doesn't work for me..

    my issue is how to use a variable(which is inside script tag) in iframe src(which is outside script tag)..

    <script>

    var path = protocol+ "://" + host + "/" + pathname;

    </script>

    <iframe src=$path style="height:800px;width:1800px" id="if1"></iframe>

    I am not able to read path variable inside iframe.. how to do that. Can you please suggest me

    Thanks

    Chinmayee

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,710 Employee
    edited Mar 29, 2016 12:09PM

    You can not do this. 

    This would be a huge security hole if anyone could actually do this. 

    An iFrame is a completely different domain and URL and can not be accessed by JavaScript inside the containing page.  The only way that I can think of that you could do something like this would be to pass parameters in the URL to the content in the iFrame.

  • Peter Flies-Oracle
    Peter Flies-Oracle Member Posts: 39
    edited Mar 29, 2016 5:15PM

    Good point about the origin issue. There is a way to communicate with an iframe and pass data to it using HTML5 postMessage, but I'm not sure how it would be used in the case of this question. Oracle Documents Cloud does this postMessage handling for loading appLink URLs into iframes. I am able to load an Documents Cloud appLink into a iframe in a JET app (but it doesn't have anything to do with JET itself).  This scenario works because of Documents Cloud message passing/handling between the parent window and iframe.

    For an iframe on the page called "appLinkFrame", you can get an AppLink URL from documents cloud by calling a REST resource. Then once you have it you can set the iframe src attribute to the URL. However, there is another step.  After the iframe URL is set, Documents Cloud returns a appLinkReady message. This message must  be handled with an event listener,  and the HTML5 postMessage method can then be called to pass the iframe a data object. 

    Call Documents Cloud to get an AppLink URL. Set the iframe src, and save the necessary data for posting a message to the iframe.

                    var folderGUID = "F0AF7C0FFA4D23F7509C524715BE5DEA38AC513C7430";

                    var docsHost = "https://mydocshost.documents.us2.oraclecloud.com/documents";

                    var appLinkFolderRestResource = "/api/1.1/applinks/folder/";

                    var restURL = docsHost + appLinkFolderRestResource + folderGUID;

                    //applink url and tokens

                    var response_appLinkURL;

                    var response_appLinkAccessToken;

                    var response_appLinkRefreshToken;

                    var response_appLinkRole;

                    $.ajax({

                        contentType: 'application/json',

                        data: '{ "role": "downloader", "assignedUser": "testuser" }',

                        dataType: 'json',

                        success: function (data) {

                            console.log(data);

                            console.log("Applink create succeeded");

                            response_appLinkURL = data.appLinkUrl;

                            response_appLinkAccessToken = data.accessToken;

                            response_appLinkRefreshToken = data.refreshToken;

                            response_appLinkRole = data.role;

                            $('#appLinkFrame').attr("src", response_appLinkURL);

                            console.log(response_appLinkURL);

                        },

                        error: function () {

                            console.log("Applink create failed");

                        },

                        processData: false,

                        type: 'POST',

                        headers: {

                            "Authorization": "Basic " + btoa("[email protected]" + ":" + "redacted!")

                        },

                        url: restURL

                    });

    Add event listener to the document for the "appLinkReady" event.

                        document.addEventListener && window.addEventListener('message', OnMessage, false);

    Handle the event and pass the message (postMessage) to the iframe showing that we have the needed tokens.

                    function OnMessage(evt) {

                        console.log("in onMessage function, message is:" + evt.data.message);

                        if (evt.data.message === 'appLinkReady') {

                            var iframe = $('#appLinkFrame')[0];

                            var iframewindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;

                            var msg = {

                                message: 'setAppLinkTokens',

                                appLinkRefreshToken: response_appLinkRefreshToken,

                                appLinkAccessToken: response_appLinkAccessToken,

                                appLinkRoleName: response_appLinkRole,

                                embedPreview: true

                            }

                            console.log("calling iframewindow.postmessage");

                           

                            iframewindow.postMessage(msg, '*');

                        }

                    };

    31747723174772
  • Jim.Marion-Oracle
    Jim.Marion-Oracle Member Posts: 929
    edited Mar 29, 2016 11:52PM

    Since the path variable is also the src attribute value, path should be the same as window.location.href from the iframe's perspective. Therefore, in the iframe, to get $path, just use window.location.href (assuming there were no redirects).

    The example in comment #3 above may have been just a pseudo-code example, but I was surprised not to see data-bind, etc in the example. I put together a jsfiddle showing how to bind the src attribute to an observable and change the observable's value from an ojSelect: https://jsfiddle.net/jmarion/wbsnsh15/.

    I noticed the example above concatenates the protocol. Modern browsers throw a security violation when the iframe's protocol differs from the parent page's protocol. If you are just trying to match the parent window's protocol, you can use protocol-less URL's (//) as demonstrated in the jsfiddle mentioned in the prior paragraph.

    If you really need to use JavaScript across frames, that is definitely possible, but requires that both the parent and child windows share the same domain. This is implicit if both have the same host, protocol, and port. If they have a different host, then you can still access the object model between frames as long as both frames set document.domain to the same value. For example, if the hosts are www.oracle.com and community.oracle.com, you can still write cross-frame JavaScript as long as both documents set the document.domain value to oracle.com.

    31747723174772