Cannot completely display HTML page in iframe

Question

0.00/5 (No votes)

See more:

I am new to iframe. I am finishing a project and am trying to display a number of HTML pages in an iframe. The iframe displays the selected page but it is not the current page on the disk. For example, the iframe displays:

BoyerMoore CLASS
Definition

Assembly: Utilities.dll

Namespace: Utilities

An implementation of the Boyer-Moore fast string searching algorithm.

but the HTML file contains:

BoyerMoore CLASS
Definition

Assembly: Utilities.dll

Namespace: Utilities

Source: BoyerMoore.cs

An implementation of the Boyer-Moore fast string searching algorithm.

Note that the line "Source: BoyerMoore.cs" is missing from the iframe display. This is true of all of the HTML files I am attempting to display in the iframe.

What am I doing wrong?

What I have tried:

:
<body>
  <div>
    <p class='title'>Utilities Library</p>
  </div>
  <div class='container'>
    <div id='sidebar'>
      <p class='members_description'>Members</p>
      <ul>
        :
        <li>
          <button onclick="switch_page ( 'BoyerMoore' )">BoyerMoore</button>
        </li>
        :
      </ul>
    </div>
    <div>
      <p class='members_description'>Description</p>
      <iframe
        id='webpage'
        src='about:blank'
        width='800'
        height='500'>
      </iframe>
    </div>
  </div>
  :
  <script>
    var webpage_id = document.getElementById ( 'webpage' );
    :
    function switch_page ( new_page )
      {
      var reference = 'file://C:/Gustafson/Source_To_HTML_new/Utilities/HTML/' +
                      new_page +
                      '.html';
      webpage_id.src = reference;
      };
    :
  </script>
</body>
:

Posted 1-Aug-24 3:59am

gggustafson

Add a Solution

Comments

Richard Deeming 1-Aug-24 12:14pm

You're probably seeing a cached version of the file. Try opening the file directly in the browser and force-refreshing it (Ctrl+F5).

Also, I'm assuming the parent page is loaded from disk? A page loaded from a website cannot reference files on the local disk in that way.

gggustafson 1-Aug-24 14:52pm

Unfortunately Ctrl-F5 has no effect. I deleted all cache from Firefox and Chrome. Both still have the same symptom.

Thanks for the try.

gggustafson 2-Aug-24 12:12pm

I moved the index.html file into the HTML directory where all of the HTML pages were located.

Sorry, same problem.

Thanks for the try.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete O'Hanlon · Answer 1 · 2024-08-02T01:26:00

Solution 1

Try setting scrolling="auto" on your iframe to see whether the content is being loaded and just not visible.

Posted 2-Aug-24 1:26am

Pete O'Hanlon

Comments

gggustafson 2-Aug-24 12:14pm

Added "scrolling='auto'" to the iframe.

Problem remains.

Thanks for the try.

Andre Oosthuizen · Answer 2 · 2024-08-04T04:06:00

Your issue is likely due to security restrictions in you web browser. Browsers typically don't allow web pages to access local files using the 'file:// protocol' in iframes for security reasons.

If you must use local files you can try the following, hopefully only for testing and not real world scenarios -

In Chrome, launch it with the '--allow-file-access-from-files' flag.
In Firefox, set 'security.fileuri.strict_origin_policy' to false in the 'about:config'.
For Edge, use the '--allow-file-access-from-files' flag.

I would also use a data URL, instead of setting the 'src' to a file path, you could load the content of the HTML file and set it as a data URL. It does however requires that your main page is served from a web server, your code will be similar to -

JavaScript

function switch_page(new_page) {
  fetch('/path/to/your/html/files/${new_page}.html`)
    .then(response => response.text())
    .then(html => {
      const dataUrl = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
      webpage_id.src = dataUrl;
    });
}