Html Question posted in
Some basic documentation can be found here.

Html – Wrapping a paragraph inside a heading behaves different in an iframe vs directly in the page

While I know wrapping a paragraph inside a heading like this:

<h1><p>Lorem<br>Ipsum</p></h1>

is invalid (see this question for example), it still renders correctly in all major browsers.

But as soon as I load the page inside an iFrame, it does break up the heading like you would usually expect the browser to do, rendering something like this:

<h1></h1><p>Lorem<br>Ipsum</p>

Why does that behave differently in an iFrame?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In fact the problem is not the iFrame, but the PHP proxy supplying the iFrames content. I forgot that I included HTML parsing in that proxy to be able to inject a custom base tag and CSS.

    This proxy uses DOMDocuments loadHTML and saveHTML methods which seems to convert the content to valid HTML.

    So it's not the browser being incosistent, it's due to the proxy.


  2. 0

    Here’s a simple example below:

    Main HTML Document:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invalid HTML Example</title>
</head>
<body>
    <h1><p>Lorem<br>Ipsum</p></h1>
</body>
</html>

    Embedded in Iframe:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe</title>
</head>
<body>
    <iframe src="iframe-content.html" style="width: 100%; height: 180px;border:none;"></iframe>
</body>
</html>

    iframe-content.html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invalid HTML Inside Iframe</title>
</head>
<body>
    <h1>
        <p>Lorem<br>Ipsum</p>
    </h1>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search