从不同页面调用 HTML 结构的最佳方式答案

【问题标题】：Best way to call HTML structure from different pages从不同页面调用 HTML 结构的最佳方式
【发布时间】：2013-11-12 09:52:59
【问题描述】：

我想知道以一致的方式从不同页面调用 HTML 结构的最佳方法是什么。

我有一个 web 应用程序，我从不同的页面调用相同类型的结构。

例如，我有一个管理媒体的页面，其中显示了已上传媒体的列表以及一些用于执行某些操作（删除、下载、上传等）的按钮。但是，如果在另一个页面中显示了“选择媒体”按钮，则应该显示相同的视图。

我想要做的是 - jQuery 被接受 - 将此结构调用到一个对话框中，并且还能够拥有一个具有相同视图的 HTML 页面。仅更改此结构一次，应回复显示它的所有页面。

实际上，我是通过调用 jQuery 函数 load().dialog() 来实现的，但我想知道是否有另一种更好的方法，比如在 Javascript 中创建一个带有渲染函数的类“MediaManagementView()”，或类似的东西。

我知道这样做的唯一方法是前面解释过的，但我认为有了你的意见和解决方案，我会得到一个更好的观点，而不是只使用我的观点。

感谢您的宝贵时间和您的回答！

【问题讨论】：

标签： javascript html function structure instance

【解决方案1】：

你在寻找这样的东西吗？

你需要 jQuery + jQuery UI

html:

<div id="dialog">
    <iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Media Manager</button>

javascript：

$(document).ready(function()
{
    $('#dialogBtn').click(function()
    {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 600,
            open: function(ev, ui){
                     $('#myIframe').attr('src','http://www.google.com');
                  }
        });
        $('#dialog').dialog('open');
    });
});

您可以轻松地将其更改为将 iframe src/url 作为参数传递的函数。

【讨论】：

感谢您的回复！事实上，我看到这与我在问题中发布的相同，使用 load() （它不是 iFrame，而是加载 HTML 内容，但它是相同的概念）。但是，webapp 可以包含一些此类内容，因此我不希望在每个页面中创建一打 iFrame，以防万一我需要使用它们。无论如何，感谢您的宝贵时间！

【解决方案2】：

看到这个问题很难得到更多答案，我会写下我所做的事情，供任何寻找可能的方法来实现这一目标的人使用。

我使用过的解决方案

最后，我使用JQuery load() function 加载了一个external HTML 页面，其中只有我想要显示的部分。

另外，我不不再使用JQuery dialog() function，因为它获得了 JQuery CSS 样式，我需要将它完全集成到我的 CSS 方案中。另外，我想要更多地控制按钮。所以我所做的是使用以下自定义函数：

function show_user_control(target_control, parameters){
    // target_control = the url we want to get the code from
    // parameters = the parameters passed to the url, in a JSON format

    /* 
      If we want to call this function and add event to its elements, perform some kind of actions when it finishes loading or call a function created within the external HTML, we will call it this way:
      $.when(show_user_control("URL_TO_LOAD")).done(function(element){ --HERE GOES THE ACTIONS TO EXECUTE-- })
    */

    return $.Deferred(function(){
        var self = this
        if(parameters === undefined) parameters = '';

        var user_control
        var parameters_url = "?"

        if(parameters != ''){
            parameters = JSON.parse(parameters)

            $.each(parameters, function(key,par){
                parameters_url += key+"="+par+"&"
            })
        }

        parameters_url = parameters_url.substring(0, parameters_url.length-1)

        $("body").append(
            $('<div class="user_control_lock"></div>').append(
                $('<div class="user_control"></div>').load(target_control + parameters_url, function(){
                    user_control = $(this)
                    user_control.center(true)

                    user_control.on(myDown, ".xlogout", function(){ // Add a global event, common to all the dialogs (if a span.xlogout is clicked, it's closed)
                        remove_user_control()
                    })

                    self.resolve(user_control)

                })
            )
        )
    })
}

function remove_user_control(target){
    // target = the JQuery object reference to the User_Control we want to remove
    if(target === undefined){
        $(".user_control_lock").last().empty()
        $(".user_control_lock").last().remove()
    }else{
        target.empty()
        target.remove()
    }
}

如果有人也有兴趣，应用到通用 divs 的 CSS 如下：

.user_control_lock{
    background: rgba(24,24,24,0.8);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
}

.user_control{
    z-index: 9999;
    position:absolute;
}

.user_control div 通过JQuery plugin center() JsFiddle sample 居中。

希望它可以帮助某人。另外，接受更正！

亲切的问候。

【讨论】：