加载里面的页面 <div> 或在网址上添加“？param =”

Question

i know the basics of loading a page or a file in a container frame via js or jQuery, but via event listener like onClick 我知道通过js或jQuery在容器框架中加载页面或文件的基本知识，但是通过事件监听器（如onClick）

JS - JS-

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

JQUERY - JQUERY-

$("#id").load("myfile.txt");

but what I want to achieve is the same as this but not just being loaded onClick in the container frame, but also add a parameter on the url, for example: 但我要实现的功能与此相同，但不仅要在容器框架中加载onClick ，还要在url上添加一个参数，例如：

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`

I wanted to do this, so I can either change the url string or press an element and load a certain file on the div container frame. 我想这样做，所以我可以更改url字符串或按一个element然后在div容器框架上加载某个文件。

the same principle goes as how facebook manages profile.php 相同的原理与facebook如何管理profile.php

http://facebook.com/profile.php?=mypersonalprofile - load my profile http://facebook.com/profile.php?=myfriendsprofile - load my friends profile http://facebook.com/profile.php?=mypersonalprofile加载我的个人资料http://facebook.com/profile.php?=myfriendsprofile加载我的朋友的个人资料

I hope I managed to deliver it clearly. 我希望我能清楚地传达它。

Answer 1

I think this would demonstrate what you looking for 我认为这将证明您在寻找什么

<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

You need to combine the solutions from Get url parameter jquery Or How to Get Query String Values In js and Modify the URL without reloading the page . 您需要结合“ 获取URL参数jquery”或“如何在js中获取查询字符串值”中的解决方案，并在不重新加载页面的情况下修改URL 。

You can set the page with 您可以使用

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

Then, if they change the url some other way (which will require the page to reload), you can get the parameter from the url and load it: 然后，如果他们以其他方式更改了网址（这将需要重新加载页面），则可以从网址中获取参数并进行加载：

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

The getUrlParameter function is defined as: 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> 或在网址上添加“？param =”

问题描述

2 个解决方案

解决方案1
1 2015-10-01 05:01:10

解决方案2
0 2015-10-01 04:33:19

加载里面的页面 <div> 或在网址上添加“？param =”

问题描述

2 个解决方案

解决方案1 1 2015-10-01 05:01:10

解决方案2 0 2015-10-01 04:33:19

解决方案1
1 2015-10-01 05:01:10

解决方案2
0 2015-10-01 04:33:19