HTML5 javascript not working in frameset

I have a page which is hosted in someone elses frameset, however it's all on the same domain ( my content is uploaded to their server via a service). WHY they are using a frameset is an argument for another day, however. They will not change their markup, so I have to find a workaround that can work in my code. I've found a bizarre problem in my test case that might help me if I can solve it. This is only a problem in IE as usual.

The wrapper frame looks like this (complete with unquoted attributes, yes):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
    <TITLE>foo</TITLE>
    <META content="text/html; charset=UTF-8" http-equiv=Content-Type>
    <META content=IE=EmulateIE8 http-equiv=X-UA-Compatible>
</HEAD>
<FRAMESET frameSpacing=0 cols=8,*,8 frameBorder=1>
    <FRAME id=blackleft src="black.htm" name=blackleft scrolling=no>
    <FRAME id=content marginHeight=0 src="button.html" name=ScormContent marginWidth=0>
    <FRAME id=blackright src="black.htm" name=blackright scrolling=no>
</FRAMESET>
</HTML>

my test case page (button.html) looks like this:

<!DOCTYPE html>
<html><head>
<meta http-equiv=X-UA-Compatible content="IE=Edge">
<title>test</title>
</head>

<body>
<section>
    <a href="javascript:alert('hello world');">
        <button>pressing me works unless you are in a frameset</button>
    </a>
</section>
<section>
    <a href="#" onclick="alert('hello world');">
        <button>Pressing me always works</button>
    </a>
</section>
</body>
</html>

I'm wondering why the first button is non responsive in IE9 when it is used within a frameset - running the page standalone results in a clickable button.

Much reading about both doctypes and the x-ua-compatible trick has left me more confused than ever, and I can't work out what I'm supposed to do. As mentioned, I can not change the frameset's markup in any way, so in order for my code to work (which relies on things like the beforeunload and unload events in order to communicate data to save when the page is navigated - which don't work when running in the frameset). My gut tells me that the button example shows I'm close to the underlying problem, and the internet tells me that it's got to do with the x-ua-compatible tag and quirks mode, but much reading on the subject has not netted me a solution yet... e.g. if I choose to force IE9 to (say) IE7 compatibility mode then all my pages styling work goes out the window.

Answers


IE has unique iframe security:

The SECURITY attribute restricts use of the javascript, vbscript, and about protocols in the URL. For example, in a restricted frame or iframe, the source file cannot execute the following code:

<a href="javascript:alert('Disallowed in restricted FRAME or IFRAME!');">JavaScript Link</a>

Need Your Help

Range versus term boosting in Elastic Search

full-text-search elasticsearch

I am struggling to make boosting work the way I want it to in Elastic Search.

Issue while dropping an element on the center pane from the west pane using jquery layout

jquery jquery-ui jquery-plugins drag-and-drop

I am using jquery layout for the layout of my application. http://layout.jquery-dev.net/demos/complex.html