iframe组件希望支持srcdoc属性 #11358

magicpose · 2024-12-11T11:02:05Z

是否关联于某个问题吗：

amis-iframe组件应该是不支持srcdoc属性，设置后iframe文档内容为空
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe#srcdoc

预期的解决方案：

希望可以支持srcdoc设置iframe的加载内容

其他可接受方案：

任何附加信息：

测试代码，原生iframe可以正常加载
data.js

var _data = '<!DOCTYPE html>\n' +
    '<html lang="en">\n' +
    '<head>\n' +
    '    <meta charset="UTF-8">\n' +
    '    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
    '    <title>React Login Form with Bootstrap 5</title>\n' +
    '    <!-- 引入 Bootstrap CSS -->\n' +
    '    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">\n' +
    '    <!-- 引入 React 和 ReactDOM -->\n' +
    '    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>\n' +
    '    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>\n' +
    '    <!-- 引入 Babel -->\n' +
    '    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>\n' +
    '</head>\n' +
    '<body>\n' +
    '<div id="root" class="d-flex justify-content-center align-items-center min-vh-100 bg-light"></div>\n' +
    '\n' +
    '<script type="text/babel">\n' +
    '    // 自定义 Hook: useInput\n' +
    '    function useInput(initialValue) {\n' +
    '        const [value, setValue] = React.useState(initialValue);\n' +
    '        const onChange = (e) => setValue(e.target.value);\n' +
    '        return {value, onChange};\n' +
    '    }\n' +
    '\n' +
    '    // 登录组件\n' +
    '    function LoginForm() {\n' +
    '        // 管理用户名和密码的状态\n' +
    '        const username = useInput("");\n' +
    '        const password = useInput("");\n' +
    '\n' +
    '        // 管理登录状态\n' +
    '        const [loading, setLoading] = React.useState(false);\n' +
    '        const [error, setError] = React.useState(null);\n' +
    '        const [message, setMessage] = React.useState("");\n' +
    '\n' +
    '        // 模拟异步登录请求\n' +
    '        const login = async () => {\n' +
    '            if (!username.value || !password.value) {\n' +
    '                setError("Username and password are required.");\n' +
    '                return;\n' +
    '            }\n' +
    '\n' +
    '            setLoading(true);\n' +
    '            setError(null);\n' +
    '            setMessage("");\n' +
    '\n' +
    '            try {\n' +
    '                // 模拟 API 请求\n' +
    '                await new Promise(resolve => setTimeout(resolve, 2000));\n' +
    '                // 假设登录成功\n' +
    '                setMessage("Login successful!");\n' +
    '            } catch (err) {\n' +
    '                setError("Login failed. Please try again.");\n' +
    '            } finally {\n' +
    '                setLoading(false);\n' +
    '            }\n' +
    '        };\n' +
    '\n' +
    '        // 使用 useRef 创建对输入框的引用\n' +
    '        const usernameRef = React.useRef(null);\n' +
    '\n' +
    '        // 当组件首次渲染时，自动聚焦用户名输入框\n' +
    '        React.useEffect(() => {\n' +
    '            usernameRef.current.focus();\n' +
    '        }, []);\n' +
    '\n' +
    '        return (\n' +
    '            <div className="card shadow-lg p-4 p-md-5 border-0">\n' +
    '                <div className="card-body">\n' +
    '                    <h2 className="card-title text-center mb-4">Login</h2>\n' +
    '                    {message && <div className="alert alert-success" role="alert">{message}</div>}\n' +
    '                    {error && <div className="alert alert-danger" role="alert">{error}</div>}\n' +
    '                    <form onSubmit={(e) => {\n' +
    '                        e.preventDefault();\n' +
    '                        login();\n' +
    '                    }}>\n' +
    '                        <div className="mb-3">\n' +
    '                            <label htmlFor="username" className="form-label">Username</label>\n' +
    '                            <input\n' +
    '                                ref={usernameRef}\n' +
    '                                id="username"\n' +
    '                                className="form-control"\n' +
    '                                type="text"\n' +
    '                                {...username}\n' +
    '                                required\n' +
    '                            />\n' +
    '                        </div>\n' +
    '                        <div className="mb-3">\n' +
    '                            <label htmlFor="password" className="form-label">Password</label>\n' +
    '                            <input\n' +
    '                                id="password"\n' +
    '                                className="form-control"\n' +
    '                                type="password"\n' +
    '                                {...password}\n' +
    '                                required\n' +
    '                            />\n' +
    '                        </div>\n' +
    '                        <div className="d-grid">\n' +
    '                            <button\n' +
    '                                className="btn btn-primary"\n' +
    '                                type="submit"\n' +
    '                                disabled={loading}\n' +
    '                            >\n' +
    '                                {loading ? "Loading..." : "Login"}\n' +
    '                            </button>\n' +
    '                        </div>\n' +
    '                    </form>\n' +
    '                </div>\n' +
    '            </div>\n' +
    '        );\n' +
    '    }\n' +
    '\n' +
    '    // 渲染组件到 DOM\n' +
    '    ReactDOM.render(<LoginForm/>, document.getElementById("root"));\n' +
    '</script>\n' +
    '</body>\n' +
    '</html>'

test.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Amis</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <link href="" rel="shortcut icon" type="image/x-icon"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.8.0/cxd.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.8.0/helper.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.8.0/iconfont.min.css"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/amis/6.8.0/sdk.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/amis/6.8.0/json-view.min.js"></script>
    <style>
        .parent {
            display: grid;
            place-items: center;
            height: 100vh;
        }

        .app-wrapper {
            position: relative;
            width: 40%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="parent" id="parent-div">
    <div id="root" class="app-wrapper"></div>
</div>
<script src="./data.js"></script>
<script type="text/javascript">
    console.log(_data)
    const miframe = document.createElement('iframe');
    miframe.setAttribute('srcdoc', _data)
    // 设置 iframe 的其他属性（可选）
    miframe.setAttribute('sandbox', 'allow-scripts'); // 启用脚本执行（如果需要）
    miframe.setAttribute('width', '100%');
    miframe.setAttribute('height', '300px');
    miframe.style.border = '1px solid #ccc';
    const parentDiv = document.getElementById('parent-div');
    parentDiv.appendChild(miframe);

    let amis = amisRequire('amis/embed');
    let amisJson = {
        "type": "page",
        "body": [
            {
                "type": "iframe",
                "src": "",
                "srcdoc": _data,
                "sandbox": "allow-scripts",
                "height": 300
            },
            {
                "type": "table",
                "columns": [
                    {
                        "name": "name",
                        "label": "姓名"
                    },
                    {
                        "name": "age",
                        "label": "年龄"
                    },
                    {
                        "name": "hei",
                        "label": "备注"
                    },
                    {
                        "name": "BornTime",
                        "label": "出生时间"
                    }
                ],
                "source": "${data}",
                "mode": "horizontal",
                "labelAlign": "left",
                "static": true,
                "submitText": ""
            }
        ]
    };
    let amisScoped = amis.embed('#root', amisJson,
        {


            locale: "zh_CN",

            data: {
                'data': [{'name': '张三', 'age': 12, 'hei': 'fsef', 'BornTime': '1604631609'}, {
                    'name': '李四',
                    'age': 13,
                    'hei': 'fsef'
                }, {'name': '王五', 'age': 11, 'hei': 'fsef', 'BornTime': '2024-11-06 11:00:09'}]
            },

        }, {
            theme: 'cxd'
        });
</script>
</body>
</html>

github-actions · 2024-12-11T11:02:23Z

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

magicpose added the enhancement New feature or request label Dec 11, 2024

github-actions bot added doc optimizing document style Bug or PR related to component's style labels Dec 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iframe组件希望支持srcdoc属性 #11358

iframe组件希望支持srcdoc属性 #11358

magicpose commented Dec 11, 2024 •

edited

Loading

github-actions bot commented Dec 11, 2024

iframe组件希望支持srcdoc属性 #11358

iframe组件希望支持srcdoc属性 #11358

Comments

magicpose commented Dec 11, 2024 • edited Loading

是否关联于某个问题吗：

预期的解决方案：

其他可接受方案：

任何附加信息：

github-actions bot commented Dec 11, 2024

magicpose commented Dec 11, 2024 •

edited

Loading