JavaScript不使用vue实现三个不同页面中的input跨页面响应式

Posted 2021-09-05 奥特曼　

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript不使用vue实现三个不同页面中的input跨页面响应式相关的知识，希望对你有一定的参考价值。

看到这个题目还是有点迷惑的，除了用vue可以实现响应式还能怎么实现

先说说我的思路你也可以评论说出你的思路动手试试

一、iframe

实现效果

iframe 是我第一个思路可能的确不知道怎么才能三个页面一起响应

可不可以把其他两个页面用iframe嵌入进来呢通过src属性用？的形式进行拼接呢，所以尝试了一下过程还是稍微繁琐的

主页面

每次触发input事件把value的值利用路由拼接的格式传给其他iframe页面标签

    <h3>我是主页面</h3>
    <input type="text" name="" id="" style="display: flex;">
    <iframe src="./iframe1.html" frameborder="0" style="display: none;"></iframe>
    <iframe src="./iframe2.html" frameborder="0" style="display: none;"></iframe>
    <script>
        let input = document.querySelector('input')
        let iframe1 = document.querySelectorAll('iframe')[0]
        let iframe2 = document.querySelectorAll('iframe')[1]
        input.oninput=()=>{
            iframe1.src='./iframe1.html?id='+input.value
            iframe2.src='./iframe2.html?id='+input.value
        }
    </script>

子页面

另一个页面和当前页面一样所以有一份就可以了

通过获取索引的最后一个= 拿到当前值，第一次页面是空的所以拿到的索引为0，0意味着下一步截取值的时候截取到的是整个路径，所以我又对它取了长度如果为0的时候就从长度开始什么页截取不到

<body>
    <h3>我是第一个页面</h3>
    <input type="text" name="" id="">
    <script>

       let dataIndex = window.location.href.indexOf('=')+1
       let dataLength = window.location.href.length
       let data = window.location.href.slice(dataIndex?dataIndex:dataLength)
       let input = document.querySelector('input')
       input.value=data
    </script>
</body>

二、localstorage

一开始想看看localstorage 在一个页面上添加一个值其他页面会不会有，结果是不但有还是响应式的只要你修改了当前localstorage的值，其他页面的localstorage也会进行响应，注意哈只有localstorage是可以多个页面进行共享的（iframe中的session也可以），但不能跨浏览器之间的共享

效果图这个效果还是比较帅的

（1）主页面

<body>
    <h3>我是主页面</h3>
    <input type="text" name="" id="">
    <script> 
       let input = document.querySelector('input')
       input.oninput=()=>{
           localStorage.setItem('str',input.value)
       }
    </script>
</body>

（2）子页面

注意哈 storage事件是我们平常没有用到的

WindowEventHandlers.onstorage: 该事件不在导致数据变化的当前页面触发（如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变 sessionStorage 或 localStorage 的数据时，其他所有页面的 storage 事件会被触发，而原始页面并不触发 storage 事件

<body>
    <h3>我是子页面1</h3>
    <input type="text" name="" id="">
    <script>
       let input = document.querySelector('input')
       window.addEventListener('storage',(e)=>{
           input.value=e.newValue
       })
    </script>
</body>

以上是关于JavaScript不使用vue实现三个不同页面中的input跨页面响应式的主要内容，如果未能解决你的问题，请参考以下文章

Vue中h5三个下拉框实现省级联动

Vue 单页应用（spa）前端路由实现原理