Javascript 在不同的html文件中将html从一个元素替换为另一个元素_Javascript_Jquery_Html

Javascript 在不同的html文件中将html从一个元素替换为另一个元素

javascript jquery html

Javascript 在不同的html文件中将html从一个元素替换为另一个元素,javascript,jquery,html,Javascript,Jquery,Html,我想用不同html文件中另一个元素的内容替换一个元素的内容我见过许多JS&JQ函数使用document.getElementById和$（this）等对同一html文件中的元素执行此操作，但这能将一个元素的内容替换为单独html文件中的另一个元素吗？下面是我的问题的一个例子 pageOne.html文件 <!DOCTYPE html> <html> <head> <title>Page 1</

我想用不同html文件中另一个元素的内容替换一个元素的内容

我见过许多JS&JQ函数使用

document.getElementById

和

$（this）

等对同一html文件中的元素执行此操作，但这能将一个元素的内容替换为单独html文件中的另一个元素吗？下面是我的问题的一个例子

pageOne.html文件

    <!DOCTYPE html>
    <html>
        <head>
        <title>Page 1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#first").click(function() {
                    $("#second").html($(this).html());
                 });
            });
        </script>
            <body>
                <p id = "first">Hello</p>
                <a href="pageTwo.html" target="_self">Page 2</a>
            </body>
    </html>


第1页
$（文档）.ready（函数（）{
$（“#第一”）。单击（函数（）{
$（“#second”）.html（$（this.html（））；
});
});
您好

pageTwo.html

    <!DOCTYPE html>
    <html>
        <head>
        <title>Page 2</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <body>
                <p id = "second">World!</p>
                <a href="pageOne.html" target="_self">Page 1</a>
            </body>
    </html>


第2页
世界

我尝试过以下不同的方法来实现这一点，但我就是不明白：

<html>
    <head>
        <script>
            function myFunction() {
                document.getElementById("#second").innerHTML = #first;
            }
        </script>
    </head>
        <body>
            <p id = "first" onclick = "myFunction()">Hello</p>
        </body>
</html>


函数myFunction（）{
document.getElementById（“#second”）.innerHTML=#first；
}
你好

这是否可能？因此，当您单击#第一个元素时，它会将#第二个元素中的内容替换为另一个html文件中的#第一个元素内容？因此，当您在页面之间单击时，

的内容将是相同的。
您要查找的内容称为选项卡式内容。如果你在谷歌上搜索，你会发现很多样本
查看以下链接：



希望这有帮助：）
请注意，javascript/jQuery只能操作网页上的元素（即显示的网页，DOM
）。因此，可以更改用户正在查看的呈现页面上的内容。这些语言无法保存到用户的本地计算机或返回到web服务器
HTML
s可以将数据从一个HTML页面传输到另一个HTML页面，但不能更新服务器上的.HTML
页面
要在服务器上进行更改，必须使用服务器端语言，如PHP或asp.Net
到目前为止，最常见的是PHP，因为它是XAMPP、LAMP、WAMP、MAMP等中的“p”。GoDaddy、Name便宜、HostGator等大型托管公司提供的大多数共享托管包都是LAMP堆栈（Linux、Apache、MySQP、PHP）。如果您的服务器上安装了PHP，那么使用它只需使用扩展名.PHP
而不是.html
来命名文件。事实上，您永远不需要再次使用.html
——每个文件都可以命名为.php
，它的工作原理与以.html
结尾的文件完全相同——只是，如果需要，它现在可以处理php代码
要在自己的计算机上使用PHP，请安装XAMPP（适用于OSX、Windows和Linux）。请注意，web文件夹是c:\xampp\htdocs
，您可以在浏览器地址栏中按类型（仅）localhost
查看网页
关于PHP

当我重新阅读您的问题时，我相信HTML表单可以满足您的要求。在Web服务器上需要这两个文件：first.html
和second.php

first.html
<!DOCTYPE html>
<html>
    <body>
        <form action="second.php" method="post">
            <input name="firstname" type="text" value="Jonathan" />
            <input type="submit" value="Submit Now">
        </form>
    </body>
</html>



second.php
<?php
    $fn = $_POST['firstname'];
?>
<!DOCTYPE html>
<html>
    <body>
        <p>You sent the name: <?php echo $fn; ?></p>
    </body>
</html>


您发送了以下名称：
这两个文件是否使用iFrame加载到同一个html页面中？它们在不同的窗口中吗？需要ajax和类似SocketIO的库。只要你不同时显示两个页面（正如@Mario所问的，它们是否在iFrame/不同的选项卡中？），客户端JavaScript根本无法做到这一点。JavaScript不操作文件，它操纵DOM，这是一个表示当前在浏览器中显示的页面的对象。如果页面加载在不同的选项卡（我指的是浏览器选项卡）中，则可以使用存储事件在它们之间进行通信。看看这个