0

How can I set height and width of IFRAME in cross domain environment?

How can I access contentDocument of IFRAME in cross domain environment?

BiscuitBaker
  • 1,421
  • 3
  • 23
  • 37
felix Antony
  • 1,450
  • 14
  • 28

1 Answers1

0

We can use IFRAME in cross domain environment. But we have to use an ajax call and IFRAME configurations. Below is the code. It worked for me. I have searched many area. Atlast I got this working code.

HTML

<iframe id="doc-frame" src="javascript:(function () {document.open();document.domain='localhost';document.close();})();" style="width:100%;height:100%;" seamless="seamless" scrolling="no" frameborder="0"></iframe>

In IFRAME we have to set the domain as same domain of the requesting window document. Else it will not work. Here I have set localhost.

JAVASCRIPT

$.support.cors = true;
            var frameSize = 0;
            $("#doc-frame").css({ 'height': frameSize, 'width': frameSize, 'zoom': '100%' });
            $.ajax({
                url: fileNamePath,// URL of the request page
                context: document.body,
                success: function (response) {
                    target = $("#doc-frame")[0].contentDocument;
                    target.open();
                    target.write(response);
                    target.close();
                    var frameMargin = 10;
                    $("#doc-frame").css("height", parseFloat($('#doc-frame').contents().height() + frameMargin) + "px");
                    $('#doc-frame').css("width", parseFloat($("#doc-frame").contents().width() + frameMargin) + "px");
                }
            });

It will work. Please use this code and please let me know the comments, drawbacks and limitations. I don't think this can fulfill all our cross domain IFRAME needs. But in some situations, we can use it.

Thank you

felix Antony
  • 1,450
  • 14
  • 28
  • 1
    Why are you overriding jQuery's CORS support detection? What good will it do to make jQuery try to use CORS in a browser that doesn't support it? – Quentin Oct 16 '14 at 10:37
  • Overriding jQuery's CORS support detection is not "using CORS". – Quentin Oct 16 '14 at 10:51
  • It did nothing for you (other then perhaps making it screw up worse in older browsers that don't support CORS). – Quentin Oct 16 '14 at 10:56
  • For ajax request in cross domain environment, how it can get response??? for that purpose i used it... – felix Antony Oct 16 '14 at 11:03
  • `$.support.cors` is set by jQuery, when you load jQuery, after it tests to see if the browser supports CORS. It is intended to be used internally by jQuery. It is not intended to be touched by developers. You use CORS without touching the `$.support.cors` variable. – Quentin Oct 16 '14 at 11:04
  • http://stackoverflow.com/questions/7852225/is-it-safe-to-use-support-cors-true-in-jquery – felix Antony Oct 17 '14 at 05:10
  • — Yes, overriding jQuery's CORS detection doesn't introduce a *security* vulnerability. That doesn't mean it makes any sense to do it though. – Quentin Oct 17 '14 at 08:09
  • did not work for me (chrome), was loading something in cache – Deadpool Apr 26 '18 at 23:19