Javascript 从不同页面调用HTML结构的最佳方法

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

我有一个webapp，我从不同的页面调用相同类型的结构

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

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

实际上，我是通过调用jQuery函数load（）.dialog（）来实现的，但我想知道是否还有其他更好的方法，比如在Javascript中创建一个包含呈现函数的类“MediaManagementView（）”，或者类似的方法

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

---

谢谢你的时间和回答

你在找这样的东西吗

您需要jQuery+jqueryui

html:

---

您可以很容易地将其更改为一个函数，将iframe src/url作为参数传递。

查看此问题很难获得更多答案，我将为搜索可能实现此目的的方法的任何人写下我所做的

我使用的解决方案

最后，我曾经加载一个外部HTML页面，其中只有我想要显示的部分

另外，我已经不再使用了，因为这得到了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()
    }
}

.user\u控件

div通过居中显示

希望它能帮助别人。此外，接受更正

---

亲切问候。

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

$(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');
    });
});

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()
    }
}

.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;
}