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?

The static pages in question are hosted by another server altogether by my read of the question. — J0e3gan, Jan 24 '14 at 03:53
@J0e3gan Ahhh, you're right, he mentions URLs to the file. Will delete my comment — jammykam, Jan 24 '14 at 03:58
Have you checked the console in your browser's developer tools for a possible error that is preventing the display of the static pages? You may be bumping into a `SAMEORIGIN` restriction. — J0e3gan, Jan 24 '14 at 04:11
BTW, `onload="LoadIframe1();"` not `onload="Loadframe1();"`. — J0e3gan, Jan 24 '14 at 04:16

score 5 · Answer 1 · answered Jan 24 '14 at 04:06

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";
    }
}

score 1 · Answer 2 · edited May 23 '17 at 12:31

It is hard to say for sure without more information - e.g. 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.

how to load a webpage in an iframe

2 Answers2