how to load a webpage in an iframe

Question

I have two static pages from a user which is deployed on their servers. Currently I am making a call to their server from code behind and loading them. But now I don't want to make a code behind call. Instead I would like to load those static pages in an iframe. Links(URL's) to those static pages is stored in my web.config. using C# during init call I am copying those URL's in hidden fields and assigning them to src of iframe like below:

<script>
    var bLoaded = false;
    function LoadIframe1() {
        if (!bLoaded) {
            var iframe1 = document.getElemetById('iframe1');
            if (typeof (iframe1) != 'undefined' && iframe1 != null) {
                iframe1.src = hiddenfield.value;
                bLoaded = true;
            }
        }
    }
</script>

<iframe id="iframe1" onload="Loadframe1();" />

Now the problem is if the files are within directory of the project, it is working fine. but how can I load the files that are not in the solution directory?

Answer 1

Why are you using JavaScript? Why don't you just set the src on render?

<iframe id="iframe1" src="<%= ExternalPageUrl %>" />

And in codebehind have a property to return the URL

protected String ExternalPageUrl
{
    get
    { 
        return "http://www.example.com/path/to/page-you-need.html";
    }
}

Answer 2

It is hard to say for sure without more information - eg errors that may be reported in your browser's development tools, but you may be bumping into a SAMEORIGIN restriction .

Here is an example of how Chrome developer tools' console would report it...

Refused to display ' https://stackoverflow.com/ ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

...with 'http://stackoverflow.com' assigned to iframe1.src .

Regardless whether you use codebehind or JS, you need to consider this.

See the related SO community wiki question & answers for ideas how to go about it that fit your situation.