Huma Ali
Huma Ali

Reputation: 1809

Blocked iframe due to mismatch protocols

I am trying to send a value from parent window to my frame on button click event but it shows error on the console

Uncaught SecurityError: Blocked a frame with origin "http://localhost:53838" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "file". Protocols must match.

on the following line:

window.parent.setUpFrame();

I have the following code in the parent container:

<!DOCTYPE html>
<html>
<head>

<script>
function setUpFrame() { 
    var frame = window.frames['myFrame'];
    $('#btn-violet').click(function () {
        frame.changeTheme(2);
    });
}
</script>

</head>
<body>

<iframe id="myFrame" width="100%" height="300px" src="http://localhost:53838/" name="iframe_a"></iframe>    <input type="button" value="bisque Theme" id="btn-bisque" />
<input type="button" value="violet theme" id="btn-violet" />

</body>
</html>

And the code inside frame looks like this:

<script>
        function init()
        {
            window.parent.setUpFrame();
            return true;
        }

        function changeTheme(id)
        {
            if (id == 1) {
                $('#CustomStyle').attr('href', '/Content/StyleSheet1.css');
            }
            else
            {
                $('#CustomStyle').attr('href', '/Content/StyleSheet2.css');
            }
        }
</script>

Upvotes: 2

Views: 1253

Answers (2)

Martin Ackermann
Martin Ackermann

Reputation: 924

It seems that you accessing your "main"-html via the file-protocol (just double-clicked the html?).

Please try to access via http://localhost:53838/ as well, or loading your iframe via file-protocol.

Upvotes: 1

pinturic
pinturic

Reputation: 2263

If your parent page is served through file this is the problem. You cannot mix a file page with an http nested frame. You should load the iframe from file as well.

Upvotes: 1

Related Questions