Fatal编程技术网
  • javascript/
  • Javascript 如何在一个网页上进行编辑以更改另一个网页上的显示

Javascript 如何在一个网页上进行编辑以更改另一个网页上的显示

javascript html css

Javascript 如何在一个网页上进行编辑以更改另一个网页上的显示,javascript,html,css,Javascript,Html,Css,我正在尝试创建两个网页。一个用作自定义页面的页面，我可以将图像上载到自定义页面，并将其显示在显示页面上，我可以在自定义页面上键入输入，它将显示在显示页面上的特定区域中。这可以通过css和html来实现吗？如果可以，我将如何实现 这是我目前必须显示上传和显示图像的代码，但它只上传到自定义页面，所以我如何连接这两个，所以当我上传图像时，它也上传到显示页面 图像代码Javascript： window.addEventListener('load', function() { document.q

我正在尝试创建两个网页。一个用作自定义页面的页面，我可以将图像上载到自定义页面，并将其显示在显示页面上，我可以在自定义页面上键入输入，它将显示在显示页面上的特定区域中。这可以通过css和html来实现吗？如果可以，我将如何实现

这是我目前必须显示上传和显示图像的代码，但它只上传到自定义页面，所以我如何连接这两个，所以当我上传图像时，它也上传到显示页面

图像代码Javascript：

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.querySelector('img');  // $('img')[0]
          img.src = URL.createObjectURL(this.files[0]); // set src to blob url
          img.onload = imageIsLoaded;
      }
  });
});

function imageIsLoaded() { 
  alert(this.src);  // blob url
  // update width and height ...
}
图像代码HTML：

<input type='file' />
<br><img id="myImg" src="#" alt="your image" height=200 width=100>
文本代码HTML: 


全名


你的名字是：
我还使用了一种更简单的方法：

 <input onkeyup="$('#name').html(this.value)" ... />
 <p id='name'></p>
要设置第一页上的值：

<body>
     <input type='file' />
     <br><img id="myImg" src="#" alt="your image" height=200 width=100>
     <input type='text' id="text" placeholder="Enter text"/>
     <button id="submitBtn">Submit</button>
</body>
<script>
     window.addEventListener('load', function() {
          document.querySelector('input[type="file"]').addEventListener('change', function() {
               if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    var baseString;
                    reader.onloadend = function () {
                         baseString = reader.result;
                         console.log(baseString); 
                         localStorage.setItem('image',baseString)
                         document.getElementById("myImg").setAttribute('src',localStorage.getItem("image"));
                    };
                    reader.readAsDataURL(this.files[0]);
               }
          });
          document.getElementById('submitBtn').addEventListener('click', function(){
               var text = document.getElementById('text').value;
               console.log(text)
               if(!text)
                    alert("Please enter input");
               else
                    localStorage.setItem('text',text);
          });
     });
</script>




提交
addEventListener（'load'，function（））{
document.querySelector（'input[type=“file”]”）。addEventListener（'change'，function（）{
if（this.files&&this.files[0]）{
var reader=new FileReader（）；
var基串；
reader.onloadend=函数（）{
baseString=reader.result；
log（基串）；
localStorage.setItem（'image'，baseString）
document.getElementById（“myImg”）.setAttribute（'src'，localStorage.getItem（“image”）；
};
reader.readAsDataURL（this.files[0]）；
}
});
document.getElementById（'submitBtn'）。addEventListener（'click'，function（）{
var text=document.getElementById（'text'）。值；
console.log（文本）
如果（！text）
警报（“请输入”）；
其他的
setItem（'text'，text）；
});
});
并在另一页中检索：

<body>
     <img src="" id="image"/>
     <img src="" id="image1"/>
     <p id="text"></p>
</body>
<script>
     window.onload = function(){
               if(localStorage.getItem("image")){
                    document.getElementById("image").setAttribute('src',localStorage.getItem("image"));
                    document.getElementById("image1").setAttribute('src',localStorage.getItem("image"));
               }
               if(localStorage.getItem("text"))
                    document.getElementById('text').innerHTML = localStorage.getItem("text");
     }
</script>




window.onload=函数（）{
if（localStorage.getItem（“图像”））{
document.getElementById（“image”）.setAttribute（“src”，localStorage.getItem（“image”）；
document.getElementById（“image1”）.setAttribute（“src”，localStorage.getItem（“image”）；
}
if（localStorage.getItem（“文本”））
document.getElementById（'text'）.innerHTML=localStorage.getItem（“text”）；
}
请注意，这不是最佳解决方案，因为有更好的技术使用现代框架，但是，鉴于您使用的技术，这将满足您的目的。

您需要一个服务器端脚本来保存自定义和上载图像，否则，您可以使用弹出窗口并从当前页面填充该脚本，什么也救不了。。一旦弹出窗口关闭，它将丢失。从技术上讲，您可以使用存储API、IndexedDb或使用SPA技术（即，将值存储在内存中，并且不实际更改HTML页面，只是使其看起来像您所做的那样）。但所有这些都比一个问题所能回答的范围更广。我鼓励您对“单页应用程序”及其工作方式进行一些研究，假设您不希望定制是永久性的。这只是一个没有服务器端支持的前端项目吗？您使用的是特定的框架还是普通的javascript？你的目标仅仅是上传图像和输入文本并在另一个页面上显示它们吗？我需要你的回答来发布解决方案。@MajedBadawi是的，目前它只是前端，没有服务器端。是的，我使用javascript作为我在网页上展示的时钟。但我唯一的目标是将图像上传到显示页面上的一个点，直到另一个点被上传，我想要在特定页面中的文本也是如此position@MajedBadawi你也可以上传它做文字。我尝试过，但无法正确模仿您对图像所做的方法。另外，如果我想复制图像功能，这样当上传文件时，我可以在两个区域显示它，我会怎么做？再次感谢您的时间和帮助谢谢！这正是我想要的。我现在正在修补它。如果我有任何问题，我会让你知道。再次感谢！ 
<body>
     <input type='file' />
     <br><img id="myImg" src="#" alt="your image" height=200 width=100>
     <input type='text' id="text" placeholder="Enter text"/>
     <button id="submitBtn">Submit</button>
</body>
<script>
     window.addEventListener('load', function() {
          document.querySelector('input[type="file"]').addEventListener('change', function() {
               if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    var baseString;
                    reader.onloadend = function () {
                         baseString = reader.result;
                         console.log(baseString); 
                         localStorage.setItem('image',baseString)
                         document.getElementById("myImg").setAttribute('src',localStorage.getItem("image"));
                    };
                    reader.readAsDataURL(this.files[0]);
               }
          });
          document.getElementById('submitBtn').addEventListener('click', function(){
               var text = document.getElementById('text').value;
               console.log(text)
               if(!text)
                    alert("Please enter input");
               else
                    localStorage.setItem('text',text);
          });
     });
</script>

<body>
     <img src="" id="image"/>
     <img src="" id="image1"/>
     <p id="text"></p>
</body>
<script>
     window.onload = function(){
               if(localStorage.getItem("image")){
                    document.getElementById("image").setAttribute('src',localStorage.getItem("image"));
                    document.getElementById("image1").setAttribute('src',localStorage.getItem("image"));
               }
               if(localStorage.getItem("text"))
                    document.getElementById('text').innerHTML = localStorage.getItem("text");
     }
</script>