从另一个 HTML 页面更改一个 HTML 页面的内容答案

【问题标题】：Change contents of one HTML page from another HTML page从另一个 HTML 页面更改一个 HTML 页面的内容
【发布时间】：2018-08-11 07:09:33
【问题描述】：

假设我有 a.html 和 b.html，我想使用在 b.html 中创建的按钮从 a.html 更改 div 元素。我该怎么做？

a.html

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to RemoteDemo</title>    
</head>
<body>
    <div id="Tvspace">
        <iframe id ="frame" width="560" height="315" src="someRandomURL" frameborder="0"  allowfullscreen></iframe>     
    </div>      
</body>
</html>

b.html

<!DOCTYPE html>
<html>
<head>
    <title>Remote</title>
</head>
<body>
    <button id = "next"> Next </button>
    <!--When I click this button I want the src to change-->
</body>
</html>

我试过了，但这仅在按钮位于 a.html 上时才有效

$("#next").click(function(){
            $("#frame").attr("src", "anotherRandomURL");
        })

【问题讨论】：

您可以使用<iframe element>.contentDocument 在 iframe 中进行 DOM 操作，尽管我不确定如何使用 jQuery 来实现这一点
您的意思是从其他页面复制元素/内容吗？
不从任何其他页面复制

标签： javascript jquery html

【解决方案1】：

*编辑：这个答案假设 b.html 作为 iframe 嵌入在 a.html 中。根据 OP 的 cmets 看来情况并非如此。

如果 a.html 和 b.html 实际上是在不同的浏览器窗口/选项卡中打开的，则有几种可能的解决方法。

最好在进程中插入服务器。这可能是 WebSockets 的好地方（尤其是对于 a.html）。在 b.html 上，您将拥有一个从 click 事件触发的 websocket 或 ajax。然后服务器将通过打开的 WebSocket 联系 a.html 以通知它点击，并且您可以使用 JavaScript 来更改 iframe src。
根据浏览器的不同，也可以创建浏览器插件。不过可能不是一个好的解决方案。

假设 b.html 在 a.html 上的 iframe 中的原始答案

这仅适用于您的 iframe 不是跨域的（请参阅same origin policy）

在 a.html 中，我假设您的 src 是 b.html：

    <iframe id ="frame" width="560" height="315" src="b.html" frameborder="0"  allowfullscreen></iframe>

在 b.html 中，执行如下脚本：

<body>
    <button id = "next"> Next </button>
    <script>
        var btn = document.querySelector('#next');
        btn.onclick = function(e){
            var pdoc =  window.parent.document;
            var frame = pdoc.querySelector('#frame');
            frame.src = 'watch.txt';
            var div = pdoc.createElement('div');
            div.innerHTML = 'Hello World';
            pdoc.body.append(div);
        };
     </script>
</body>

跨框架使用 jQuery 是可能的，但您必须记住，这两个框架都需要将 jQuery 库作为脚本标签包含在内。

【讨论】：

a.html 中的 src 是一个 youtube URL。当我单击 b.html 中的按钮时，另一个 URL 将在同一位置加载
所以我收集到 a.html 和 b.html 在不同的浏览器选项卡/窗口中运行？也许在同一台计算机上，也许在不同的计算机上？如果这就是您的意思，我修改了我的答案以解决这种情况。