Question

我知道通过js或jQuery在容器框架中加载页面或文件的基础知识，但是通过像onClick这样的事件监听器

JS -

error: nil

JQUERY -

document.getElementById("id").innerHTML = "<object type = 'text/html' data = 'myfile.html'> </data>"

但我想要达到的目的与此相同，但不仅仅是在容器框架中加载$("#id").load("myfile.txt");，而且还在网址上添加了一个参数，例如：

onClick

我想这样做，因此我可以更改if I click on a button, `webpage.html` will load on `<div>` container frame, and the `url` will change to `http://example.com/?loaded=webpage.html`字符串或按url并在element容器框架上加载某个文件。

与 facebook 管理div

的原理相同

profile.php - 加载我的个人资料 http://facebook.com/profile.php?=mypersonalprofile - 加载我的好友资料

我希望我设法清楚地传达它。

Answer 1

我认为这会证明你在寻找什么

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <button class="loadButton" value="input1.txt">Load file 1</button>
    <button class="loadButton" value="input2.txt">Load file 2</button>
    <div id="view"></div>
</body>
<script>
    $(function(){

        // Call loadPage on init
        loadPage();

        $(".loadButton").on("click", function(){

                // Change URL, you can change "/testJS/index.html" to suit your web address
                history.pushState({}, "", "/testJS/index.html?loaded=" + $(this).attr("value"));
                $("#view").empty();
                $("#view").load($(this).attr("value"));
            });
        });

        function loadPage() {
            console.log("start");
            var href = window.location.href;
            var index = href.indexOf("?loaded=");

            // Load data if we define the loaded param
            if (index > -1) {
                data = href.substring(index + 8);
                console.log(index + "   " + data);
                $("#view").empty();
                $("#view").load(data);
            }
        }
    </script>
</html>

Answer 2

您需要合并Javadoc和Get url parameter jquery Or How to Get Query String Values In js的解决方案。

您可以使用

设置页面

history.pushState({}, "", "/mainpage.html?loaded=webpage.html");
$("#id").load("webpage.html");

然后，如果他们以其他方式更改url（这将需要重新加载页面），您可以从url获取参数并加载它：

var myfile = getUrlParameter("loaded");
$("#id").load(myfile);

getUrlParameter函数定义为：

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true :    sParameterName[1];
        }
    }
};

在<div>中加载页面或在url上添加“？param =”

2 个答案: