Question

假设我有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");
        })

Answer 1

*编辑：此答案假设b.html作为iframe嵌入a.html中。根据OP的评论，似乎并非如此。

如果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库作为脚本标记包含在内。

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

1 个答案:

假设b.html在a.html