Moodle

iframe is not supported in XHTML 1.0 Strict

Details

  • Type: Bug Bug
  • Status: Closed Closed
  • Priority: Minor Minor
  • Resolution: Fixed
  • Affects Version/s: 1.9.3
  • Fix Version/s: 2.0
  • Component/s: Accessibility, Resource
  • Labels:
    None
  • Affected Branches:
    MOODLE_19_STABLE
  • Fixed Branches:
    MOODLE_20_STABLE

Description

When linking to a file or website in the resources options, you can specify the parameter "Keep page navigation visible on the same page". If you check it, it will embed the file in an iframe. But iframes are not supported in XHTML 1.0 Strict, thus they need to be replaced.

The new form of specifying something similiar to the <iframe> tag is to use the <object> tag. Here is an example:

<iframe id="embeddedhtml" src ="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></iframe>

should be

<object id="embeddedhtml" type="text/html" data="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></object>

I have tested it in Firefox 3.0.4, Safari 3.2.1 and Internet Explorer 7 (IE7 asked me to accept the blocked content) and it works perfectly. If you want to tested in other browsers, it will be helpful.

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
David Horat added a comment -

You can use this file to test if your browser accepts the <object> tag to be used as an <iframe>. You should see two copies of the www.google.com webpage, one under the other, along with some instructions. The first one is using <iframe> and the second is using <object>.

Show
David Horat added a comment - You can use this file to test if your browser accepts the <object> tag to be used as an <iframe>. You should see two copies of the www.google.com webpage, one under the other, along with some instructions. The first one is using <iframe> and the second is using <object>.
Hide
Permalink
Tiffany DeJager added a comment -

This fix works for me in FF 3.0.4 with the following exception - no way to control scrolling. I want to turn off the scrolling to eliminate the two scroll bars (one for the site and one for the embedded object). Solutions?

Show
Tiffany DeJager added a comment - This fix works for me in FF 3.0.4 with the following exception - no way to control scrolling. I want to turn off the scrolling to eliminate the two scroll bars (one for the site and one for the embedded object). Solutions?
Hide
Permalink
David Horat added a comment -

Hi Tiffany. On the example file I submitted, the scrollbars behave as usual:

If you have a big window to see the content, no scrollbars are displayed. If you specify the correct height for the object tag, you won´t get ever a vertical scrollbar for the embeded object, but in the worst case for the whole page. Same applies to width. So you can play with both the height and width values of the object to achieve the result you want.

If my explanation doesn´t help, feel free to submit an example file and a screenshot with what you want to achieve.

Show
David Horat added a comment - Hi Tiffany. On the example file I submitted, the scrollbars behave as usual: If you have a big window to see the content, no scrollbars are displayed. If you specify the correct height for the object tag, you won´t get ever a vertical scrollbar for the embeded object, but in the worst case for the whole page. Same applies to width. So you can play with both the height and width values of the object to achieve the result you want. If my explanation doesn´t help, feel free to submit an example file and a screenshot with what you want to achieve.
Hide
Permalink
Tiffany DeJager added a comment -

That worked perfectly! Dont know why I didnt just try adjusting the height-thanks! This solved a huge problem I was having in setting up our courses!

Show
Tiffany DeJager added a comment - That worked perfectly! Dont know why I didnt just try adjusting the height-thanks! This solved a huge problem I was having in setting up our courses!
Hide
Permalink
Dan Marsden added a comment -

this has already improved a lot in 2.0 - most uses of iframe are only there as a fall back if IE 5 is detected - the only places I can see that aren't using it correctly are in the hotpot mod, the algebra and tex filters

Now that IE 5 support has been dropped - do we still need all the "If IE5" statements - can these be removed now?

Show
Dan Marsden added a comment - this has already improved a lot in 2.0 - most uses of iframe are only there as a fall back if IE 5 is detected - the only places I can see that aren't using it correctly are in the hotpot mod, the algebra and tex filters Now that IE 5 support has been dropped - do we still need all the "If IE5" statements - can these be removed now?
Hide
Permalink
Dan Marsden added a comment -

adding Gordon - Hotpot maintainer.

Show
Dan Marsden added a comment - adding Gordon - Hotpot maintainer.
Hide
Permalink
Gordon Bateson added a comment -

Thanks Dan, for adding me, and thanks for Dave for the workaround. If it works thAT simply I should be able to add it pretty quickly.

The current implementation of iframes in the HotPot module has some javascript for adjusting the height to make the entire content visible without scrolling. This is important for HotPots, so I hope it is possible to do something simliar with the object tags.

many thanks
Gordon

Show
Gordon Bateson added a comment - Thanks Dan, for adding me, and thanks for Dave for the workaround. If it works thAT simply I should be able to add it pretty quickly. The current implementation of iframes in the HotPot module has some javascript for adjusting the height to make the entire content visible without scrolling. This is important for HotPots, so I hope it is possible to do something simliar with the object tags. many thanks Gordon
Hide
Permalink
David Horat added a comment -

Good luck Gordon.

Show
David Horat added a comment - Good luck Gordon.
Hide
Permalink
Gordon Bateson added a comment - - edited

Thanks David!

It's going pretty well. The JavaScript to figure out the height of the document in the OBJECT works fine in FF3 and IE8, but it is proving awkward to to trigger the height adjustment on IE.

For FF, I can use the "onload" event for the OBJECT tag, just the same as I could for the IFRAME tag:

<object id="hotpot_iframe" 
type="text/html" width="100%" height="95%" 
data="view.php?attemptid=99&amp;framename=main" 
onload="set_iframe_height(this)"></object>

However, IE doesn't recognize the "onload" event for OBJECTs, even though it does for IFRAMEs and even though it seems happy loading html documents in OBJECT tags.

I am sure there will be a way, but for today I think I will call it a day. Out for now!

Show
Gordon Bateson added a comment - - edited Thanks David! It's going pretty well. The JavaScript to figure out the height of the document in the OBJECT works fine in FF3 and IE8, but it is proving awkward to to trigger the height adjustment on IE. For FF, I can use the "onload" event for the OBJECT tag, just the same as I could for the IFRAME tag: 
<object id="hotpot_iframe" 
type="text/html" width="100%" height="95%" 
data="view.php?attemptid=99&amp;framename=main" 
onload="set_iframe_height(this)"></object>
However, IE doesn't recognize the "onload" event for OBJECTs, even though it does for IFRAMEs and even though it seems happy loading html documents in OBJECT tags. I am sure there will be a way, but for today I think I will call it a day. Out for now!
Hide
Permalink
Gordon Bateson added a comment -

Here's the MS blurb on what events the OBJECT and IFRAME objects can handle:

OBJECT
http://msdn.microsoft.com/en-us/library/ms535859%28v=VS.85%29.aspx

IFRAME
http://msdn.microsoft.com/en-us/library/ms535258%28v=VS.85%29.aspx

Show
Gordon Bateson added a comment - Here's the MS blurb on what events the OBJECT and IFRAME objects can handle: OBJECT http://msdn.microsoft.com/en-us/library/ms535859%28v=VS.85%29.aspx IFRAME http://msdn.microsoft.com/en-us/library/ms535258%28v=VS.85%29.aspx
Hide
Permalink
Gordon Bateson added a comment -

This page says we should make two versions of the <object> tag, and use conditional comments to serve one to IE and one to everybody else:

http://aplus.rs/web-dev/insert-html-page-into-another-html-page/

IE8 seems to be happy with either, but I haven't tested IE7 or IE6 yet.

Show
Gordon Bateson added a comment - This page says we should make two versions of the <object> tag, and use conditional comments to serve one to IE and one to everybody else: http://aplus.rs/web-dev/insert-html-page-into-another-html-page/ IE8 seems to be happy with either, but I haven't tested IE7 or IE6 yet.
Hide
Permalink
Dan Marsden added a comment -

HI Gordon - afaik the IE issues with the object tag are specific to IE 5 - (which Moodle 2.0 doesn't officially support now anyway) - I think even IE 6 support has been dropped, so you don't need to worry too much about those!

If you're really keen to keep IE 5 support there are a few examples in the Moodle code that perform an IE check and display an Iframe if detected - just do a search for "iframe" in the code and it should pull them up!

hope that helps!

Show
Dan Marsden added a comment - HI Gordon - afaik the IE issues with the object tag are specific to IE 5 - (which Moodle 2.0 doesn't officially support now anyway) - I think even IE 6 support has been dropped, so you don't need to worry too much about those! If you're really keen to keep IE 5 support there are a few examples in the Moodle code that perform an IE check and display an Iframe if detected - just do a search for "iframe" in the code and it should pull them up! hope that helps!
Hide
Permalink
Gordon Bateson added a comment - - edited

Hi Dan,
> IE issues with the object tag are specific to IE 5

Actually the issue I am concerned about is that no versions of IE support the onload event for object tags, so I would like to use conditional comments to keep the <iframe> for IE, and give an <object> to the standard compliant browsers.

It ends up looking like this :

<!--[if IE]>
<iframe name="ie_hotpot_iframe" id="hotpot_iframe" 
src="mod/hotpot/view.php?quizattemptid=99&amp;framename=main" 
width="100%" height="600" onload="set_iframe_height(this)"></iframe>
<![endif]-->
<!--[if !IE]> <-->
<object id="hotpot_iframe" type="text/html" 
data="mod/hotpot/view.php?quizattemptid=99&amp;framename=main" 
width="100%" height="600" onload="set_iframe_height(this)"></object>
<!--> <![endif]-->

I will test this a little more over the weekend and commit the new code when I have confirmed it works on the browsers I have.

regards
Gordon

Show
Gordon Bateson added a comment - - edited Hi Dan, > IE issues with the object tag are specific to IE 5 Actually the issue I am concerned about is that no versions of IE support the onload event for object tags, so I would like to use conditional comments to keep the <iframe> for IE, and give an <object> to the standard compliant browsers. It ends up looking like this : 
<!--[if IE]>
<iframe name="ie_hotpot_iframe" id="hotpot_iframe" 
src="mod/hotpot/view.php?quizattemptid=99&amp;framename=main" 
width="100%" height="600" onload="set_iframe_height(this)"></iframe>
<![endif]-->
<!--[if !IE]> <-->
<object id="hotpot_iframe" type="text/html" 
data="mod/hotpot/view.php?quizattemptid=99&amp;framename=main" 
width="100%" height="600" onload="set_iframe_height(this)"></object>
<!--> <![endif]-->
I will test this a little more over the weekend and commit the new code when I have confirmed it works on the browsers I have. regards Gordon
Hide
Permalink
David Horat added a comment -

Gordon, that solution will keep using iframes and the idea is to get rid of them. I am sure that there should be a way to do what you want in Internet Explorer without using iframes.

Show
David Horat added a comment - Gordon, that solution will keep using iframes and the idea is to get rid of them. I am sure that there should be a way to do what you want in Internet Explorer without using iframes.
Hide
Permalink
Gordon Bateson added a comment -

David, yes ... I thought about adding an "onload" event to the page that is being loaded, i.e. the HotPot quiz that appears in the iframe/object. It could try and check if it is contained in an <object> tag and call the risizing function in the <object>'s window ... or something. However the HotPot page already has quite a complex set of "onload" actions, so I fear breaking something if I fiddle too much.

As indicated in the links I gave earlier, the IE <object> tag does not have an "onload" event. It has other events and I experiemnted with some of them. The "onstatuschange" looked promising, but so far I haven't found a way to detect when the embedded page loads and trigger the resizing.

BTW, the resizing function works OK if I call it manually after the page has loaded; the <object> is resized to fit the contents. We just need to find a way to call the resizing routine at the right time.

Any further pointers and advice are most welcome.

Show
Gordon Bateson added a comment - David, yes ... I thought about adding an "onload" event to the page that is being loaded, i.e. the HotPot quiz that appears in the iframe/object. It could try and check if it is contained in an <object> tag and call the risizing function in the <object>'s window ... or something. However the HotPot page already has quite a complex set of "onload" actions, so I fear breaking something if I fiddle too much. As indicated in the links I gave earlier, the IE <object> tag does not have an "onload" event. It has other events and I experiemnted with some of them. The "onstatuschange" looked promising, but so far I haven't found a way to detect when the embedded page loads and trigger the resizing. BTW, the resizing function works OK if I call it manually after the page has loaded; the <object> is resized to fit the contents. We just need to find a way to call the resizing routine at the right time. Any further pointers and advice are most welcome.
Hide
Permalink
David Horat added a comment -

I made an example that works in IE 8, Firefox 3.0, Safari 4, Google Chrome 5.0 and Opera 9.64. You could try it in others, I expect it to work.

I will attach the example to this bug.

Show
David Horat added a comment - I made an example that works in IE 8, Firefox 3.0, Safari 4, Google Chrome 5.0 and Opera 9.64. You could try it in others, I expect it to work. I will attach the example to this bug.
Hide
Permalink
David Horat added a comment -

Test on how to trigger an onload event for an <object> tag in Internet Explorer. This example has been tested and works for: IE 8, Firefox 3.0, Safari 4, Google Chrome 5.0 and Opera 9.64.

Have fun!

Show
David Horat added a comment - Test on how to trigger an onload event for an <object> tag in Internet Explorer. This example has been tested and works for: IE 8, Firefox 3.0, Safari 4, Google Chrome 5.0 and Opera 9.64. Have fun!
Hide
Permalink
Gordon Bateson added a comment -

Great, thanks for that David. That will do the job nicely
I will add it to the HotPot and QuizPort modules.

Show
Gordon Bateson added a comment - Great, thanks for that David. That will do the job nicely I will add it to the HotPot and QuizPort modules.
Hide
Permalink
Gordon Bateson added a comment -

I have modified the HotPot module scripts, and committed the changes to Moodle 1.9 CVS repository.
many thanks!
Gordon

Show
Gordon Bateson added a comment - I have modified the HotPot module scripts, and committed the changes to Moodle 1.9 CVS repository. many thanks! Gordon
Hide
Permalink
David Horat added a comment -

Your welcome. Nice job!

Show
David Horat added a comment - Your welcome. Nice job!
Hide
Permalink
Gordon Bateson added a comment - - edited

I have been testing further with embedding html documents using an <object> tag, and have discovered that in IE links and forms whose target is set to "_top" do not reload the "_top" window.

In other words, once a document is displayed in an IE <object>, it becomes trapped ?!

This is bad news for Hot Potatoes quizzes, because of course once finished they send their results back to Moodle and we want the course page to be displayed in the "_top" window, not confined in the <object>.

This problem only occurs on IE. Other browsers (FF, Safari, Opera, Chrome) allow the links and forms to be targeted to the "_top" window, and behave as expected.

I attach a zipped folder containing two sample files to illustrate what I am talking about.

I've googled and tested till my fingers are sore and my brain aches, but I cannot find a way round this. If anyone can offer ideas and suggestions, I would be most grateful.

Gordon

Show
Gordon Bateson added a comment - - edited I have been testing further with embedding html documents using an <object> tag, and have discovered that in IE links and forms whose target is set to "_top" do not reload the "_top" window. In other words, once a document is displayed in an IE <object>, it becomes trapped ?! This is bad news for Hot Potatoes quizzes, because of course once finished they send their results back to Moodle and we want the course page to be displayed in the "_top" window, not confined in the <object>. This problem only occurs on IE. Other browsers (FF, Safari, Opera, Chrome) allow the links and forms to be targeted to the "_top" window, and behave as expected. I attach a zipped folder containing two sample files to illustrate what I am talking about. I've googled and tested till my fingers are sore and my brain aches, but I cannot find a way round this. If anyone can offer ideas and suggestions, I would be most grateful. Gordon
Hide
Permalink
Gordon Bateson added a comment - - edited

BTW, the way I tried validating my two sample files at http://validator.w3.org/ and was told that for the <object> tag in XHTML 1.0 Strict ...

there is no attribute "onload"
...type="text/html" id="embed_object" onload="onloadObject();"

I am getting the distinct impression that I am trying to use the wrong tool for the job. In particular, the implementation of XHTML 1.0 Strict <object> tags on IE is so awkward that I think I maybe better off sticking with iframes and a "Transitional" document type for Hot Potatoes quizzes.

Show
Gordon Bateson added a comment - - edited BTW, the way I tried validating my two sample files at http://validator.w3.org/ and was told that for the <object> tag in XHTML 1.0 Strict ... there is no attribute "onload" ...type="text/html" id="embed_object" onload="onloadObject();" I am getting the distinct impression that I am trying to use the wrong tool for the job. In particular, the implementation of XHTML 1.0 Strict <object> tags on IE is so awkward that I think I maybe better off sticking with iframes and a "Transitional" document type for Hot Potatoes quizzes.
Hide
Permalink
David Horat added a comment -

Maybe to make this fully XHTML 1.0 Strict will need to rewrite part of the code. So it is up to you.

Show
David Horat added a comment - Maybe to make this fully XHTML 1.0 Strict will need to rewrite part of the code. So it is up to you.
Hide
Permalink
Gordon Bateson added a comment - - edited

Thanks for the green light David. I have made this fully XHTML 1.0 Strict without losing any functionality by doing the following:

  • use conditional comments to give IE an <iframe> and everybody else an <object>. As described above this is because forms and links cannot escape from an <object> in IE
  • use javascript to add the onload event handler for the <object> tag. This is because the <object> tag has no onload attribute in XHTML 1.0 Strict

I tested the files in the attached "test.ie.conditional" zip file on the w3 validator and they both passed with flying colors - yay!

  • This document was successfully checked as XHTML 1.0 Strict!

I will commit these change to the Moodle CVS in due course.

Show
Gordon Bateson added a comment - - edited Thanks for the green light David. I have made this fully XHTML 1.0 Strict without losing any functionality by doing the following:
  • use conditional comments to give IE an <iframe> and everybody else an <object>. As described above this is because forms and links cannot escape from an <object> in IE
  • use javascript to add the onload event handler for the <object> tag. This is because the <object> tag has no onload attribute in XHTML 1.0 Strict
I tested the files in the attached "test.ie.conditional" zip file on the w3 validator and they both passed with flying colors - yay!
  • This document was successfully checked as XHTML 1.0 Strict!
I will commit these change to the Moodle CVS in due course.
Hide
Permalink
Dan Marsden added a comment -

good work Gordon!

Show
Dan Marsden added a comment - good work Gordon!
Hide
Permalink
Martin Dougiamas added a comment -

Can this be closed?

Show
Martin Dougiamas added a comment - Can this be closed?
Hide
Permalink
David Horat added a comment -

Hi Martin,

You should validate all affected pages with the W3C Validator or another XHTML validation tool. If they all pass, you can close this issue.
http://validator.w3.org/

Regards,
David

Show
David Horat added a comment - Hi Martin, You should validate all affected pages with the W3C Validator or another XHTML validation tool. If they all pass, you can close this issue. http://validator.w3.org/ Regards, David
Hide
Permalink
Gordon Bateson added a comment -

The hotpot/view.php page, with "Navigation" set to "Embedded IFRAME", has a single validation error (see below). The validation error is not connected with the fix for this issue, so maybe we can close it.

======================================
Error Line 1541, Column 79:
document type does not allow element "div" here;
missing one of "object", "ins", "del", "map", "button" start-tag

...ass="logininfo"><div class="logininfo">You are logged in as <a href="http://1...

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Show
Gordon Bateson added a comment - The hotpot/view.php page, with "Navigation" set to "Embedded IFRAME", has a single validation error (see below). The validation error is not connected with the fix for this issue, so maybe we can close it. ====================================== Error Line 1541, Column 79: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag ...ass="logininfo"><div class="logininfo">You are logged in as <a href="http://1... The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Hide
Permalink
Gordon Bateson added a comment -

And of course, the original issue refers to Resources as well. I haven't look into that.

Show
Gordon Bateson added a comment - And of course, the original issue refers to Resources as well. I haven't look into that.
Hide
Permalink
Gordon Bateson added a comment -

For good measure, I have fixed the lone validation error from the HotPot view.php script, so I consider this issue "closed" as far as the HotPot module is concerned.

Show
Gordon Bateson added a comment - For good measure, I have fixed the lone validation error from the HotPot view.php script, so I consider this issue "closed" as far as the HotPot module is concerned.
Hide
Permalink
Dan Marsden added a comment -

I'm flagging this particular issue as fixed - as far as I can see there the only Iframes left are wrapped by IsIE style checks and are only used where object isn't supported.

any other XHTML issues should be logged in seperate bugs related to the specific module that is responsible.

thanks!

Show
Dan Marsden added a comment - I'm flagging this particular issue as fixed - as far as I can see there the only Iframes left are wrapped by IsIE style checks and are only used where object isn't supported. any other XHTML issues should be logged in seperate bugs related to the specific module that is responsible. thanks!

People

Vote (0)
Watch (2)

Dates

  • Created:
    Updated:
    Resolved:
Atlassian JIRA (v4.4.3#663-r165197) | Report a problem
Powered by a free Atlassian JIRA open source license for Moodle. Try JIRA - bug tracking software for your team.