layui 打开新页面,并传入参数

ゝ一纸荒年。 2021-12-11 16:17 1583阅读 1赞

## layui 打开新页面,并传入参数 ##

使用的 wangEditor 富文本编辑器不带预览的功能，  
所以自己实现了下功能；  
思路是：  
点击打开一个弹窗 or 新页面，  
然后页面展示提交后前端页面看到的大概的样子。  
涉及到需要把内容传递到打开的 iframe 页面内，  
刚好可以利用 layui 携带传参的一个特点。

## 效果预览： ##

![layui 打开新页面,并传入参数][layui]  
![layui 打开新页面,并传入参数][layui 1]

## 具体代码实现为： ##

*  创建一个 `preview.html` 预览页面，css 样式来自 wangEditor 官方文档给出的

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>预览内容</title>
        <style>
            /* table 样式 */
            table {
                border-top: 1px solid #ccc;
                border-left: 1px solid #ccc;
            }
            table td,
            table th {
                border-bottom: 1px solid #ccc;
                border-right: 1px solid #ccc;
                padding: 3px 5px;
            }
            table th {
                border-bottom: 2px solid #ccc;
                text-align: center;
            }
    
            /* blockquote 样式 */
            blockquote {
                display: block;
                border-left: 8px solid #d0e5f2;
                padding: 5px 10px;
                margin: 10px 0;
                line-height: 1.4;
                font-size: 100%;
                background-color: #f1f1f1;
            }
    
            /* code 样式 */
            code {
                display: inline-block;
                *display: inline;
                *zoom: 1;
                background-color: #f1f1f1;
                border-radius: 3px;
                padding: 3px 5px;
                margin: 0 3px;
            }
            pre code {
                display: block;
            }
    
            /* ul ol 样式 */
            ul, ol {
                margin: 10px 0 10px 20px;
            }
    
        </style>
    </head>
    <body>
    
    <div id="content"></div>
    
    </body>
    </html>

*  点击事件代码：

[layui]: /images/20211211/ab9318e2883f4e83a527508c18cd61ff.png
[layui 1]: /images/20211211/2be7c095ca56400aa044a02d78204222.png