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

问题描述 投票：1回答：1

假设我有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");
        })
javascript jquery html
1个回答
0
投票

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

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

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

Original answer assuming b.html was in an iframe on a.html

这仅适用于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库作为脚本标记包含在内。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.