Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

When operating the iframe parent-child page,tree mode view cannot automatically format expanded display #321

Closed
itbencn opened this issue Oct 13, 2023 · 3 comments
Closed

When operating the iframe parent-child page,tree mode view cannot automatically format expanded display #321

itbencn opened this issue Oct 13, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@itbencn
Copy link

itbencn commented Oct 13, 2023 •
edited
Loading 

<body>
    <div id='jsoneditor' style='width:100%;height:100%'></div>
</body>
<script type='module'>
    import { JSONEditor } from '/src/jsoneditor.js'
    const editor = new JSONEditor({
        target: document.getElementById('jsoneditor')
    })
    window.editor = editor;

    const setJson = function (json) {
        const content = {
            text: undefined,
            json: json
        }
        editor.set(content);
    }
    window.setJson = setJson;

    //Simulate the current page operation, everything is normal
    window.onload = function () {
        setJson({
            array: [1, 2, 3],
            boolean: true,
            color: '#82b92c',
            null: null,
            number: 123,
            object: { a: 'b', c: 'd' },
            time: 1575599819000,
            string: 'Hello World'
        });
    }
</script>
Snipaste_2023-10-13_18-16-20

When I directly call the setJson method on the current page to pass json parameters, the tree view can expand and display normally.
But when I called setJson on the parent page by obtaining the window object, the text view was normal, and the tree view only displayed [object object] without automatic expansion or even manual expansion.

But if I call setJson on the parent page and pass the text parameter, the tree can expand and display normally
@josdejong
Copy link
Owner

Thanks for reporting. Can you create a minimal demo with an iframe showing how this goes wrong?

It looks like the content is stringified calling .toString() on a JavaScript object returns "[object Object]"

@itbencn
Copy link
Author

itbencn commented Oct 13, 2023

Thanks for reporting. Can you create a minimal demo with an iframe showing how this goes wrong?

It looks like the content is stringified calling .toString() on a JavaScript object returns "[object Object]"

usage: access parent.html as local server running
The vscode plugin I am using: Live Preview or Live Server

demo.zip

@josdejong
Copy link
Owner

Thanks for the demo code, I can indeed reproduce your issue. The cause here is that a JavaScript object created in the main thread is to be used in an iframe. That is a different JavaScript realm. The editor checks whether the input is an Object by checking value.constructor === Object, but that is false when the value is created in a different JavaScript realm. I'll make the function less strict to fix this issue.

As a workaround, you can do:

const setJson = function (json) {
    const jsonCreatedInIframe = JSON.parse(JSON.stringify(json))
    const content = {
        text: undefined,
        json: jsonCreatedInIframe 
    }
    editor.set(content);
}

@josdejong josdejong added the bug Something isn't working label Oct 18, 2023
@WKBae WKBae mentioned this issue Jan 18, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@josdejong @itbencn