Trame iframe

[HuyNguyenDePaul]

Hi,

Since it is easier for me, who does not have much experience or knowledge with web-development, to develop and debug a trame application using the standard layouts (opposed to writing custom client/frontend), I have been recently writing some test apps using SinglePageLayout.

I wanted to see the test applications through an iframe. The thing that confuses me is that I have two different prototypes, both using the trame server, both written functionally, however, one is able to display through an iframe but the other test application is not, I encounter a "localhost refuses to connect". I think the problem is because of "cross-origin resource sharing" but I am unsure because one of the test application works perfectly fine, but the other does not.

I was looking at using trame-iframe, but I am unsure if that is the correct solution. Because I do not need any communication between the parent html page, and the child trame server. And I am also unaware of how I would apply trame-iframe to my current application to bypass CORS, if CORS is really the problem.

Here are the SinglePageLayout:
Works using an iframe

with SinglePageLayout(server) as dashboard:
    dashboard.title.set_text("Database Manager")
    dashboard.content.clear()

    with dashboard.content:
        # Add New Record Button
        with vuetify.VRow():
            with vuetify.VCol(cols="auto"):
                vuetify.VBtn(
                    "Add New Record",
                    click=add_new_record,
                    classes="ma-2",
                    color="primary",
                    dark=True,
                )

        # Display current records
        with vuetify.VCard():
            vuetify.VCardText("Active Records:")
            with vuetify.VList(shaped=True):
                print(f"state_info: {database_interface}") 
                with vuetify.VListItem(v_for="(record, idx) in record_list", key="idx"):
                    print(f"record_list: {database_interface.record_list}")
                    with vuetify.VListItemIcon():
                        vuetify.VIcon("mdi-database")
                    with vuetify.VListItemContent():
                        vuetify.VListItemTitle("{{ record.id }} - {{ record.state }}")
                    with vuetify.VBtn(icon=True, click="trigger('delete_record', [record.id.toString()])"):
                        vuetify.VIcon("mdi-delete")

Does NOT work using an iframe

    with SinglePageLayout(server) as layout:
        layout.title.set_text(name)  # Setting the title for each server UI
        
        with layout.content:
            with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
                vuetify.VSlider(v_model="bins", min=1, max=100, step=1, label="Number of Bins")
                vuetify.VFileInput(v_model="file_input", label="Upload CSV", accept=".csv")
                vuetify.VSelect(v_model=("selected_column", None), items=("column_options",), label="Select Column")
                html_view = vtk.VtkRemoteView(view.GetRenderWindow())
                ctrl.view_update = html_view.update
                ctrl.view_reset_camera = html_view.reset_camera

[HuyNguyenDePaul]

Never mind, I am stupid, resolved.

[jourdain]

Any hint on what was the human error? Could be useful for someone else?

[HuyNguyenDePaul]

Yeah, the error was with the browser. I am used to using Microsoft Edge and it is my default browser, but Microsoft Edge was blocking the iframe. I am not quite sure of why Microsoft Edge was blocking the iframe (I did not solve this issue) but from what I understand of what the other student who figured out what was wrong was saying, they basically said remove extension, use a private window, or use Chrome. I used Chrome and now it works perfectly fine, albeit very slow.

[jourdain]

That is indeed strange that things will be slower in an iframe vs main window.