TransWikia.com

Страница – админка, с одной кнопкой перезагрузки для другой страницы

Stack Overflow на русском Asked by O K on February 8, 2021

Задача заключается в том, чтобы можно было нажатием кнопки перезагрузить другую страничку запросом через сервер. Как можно это реализовать?

<!-- Первый файл html -->
<button>Перезагрузить сайт</button>

<!-- Второй файл php -->
PHP код на стороне сервера

<!-- Третий файл html -->
<div>Информация которую нужно обновить</div>
htmljavascriptphp

One Answer

Реализация перезагрузки страницы по вебсокетам с ssl сертификатом.

В этом ответе я привожу пример который работает именно с ssl сертификатом. Как оказалась собрать конструкцию с обычным http не составило труда. Но когда вставляешь iframe с http протоколом на сайт имеющий https, то это образует дыру на сайте, соответственно сайт с https не позволяет работать iframe. Поправьте меня если я где-то допустил ошибку.
На своем сервере я так и не смог запустить с ssl. А на платформе heroku.com это получилась. Благодаря этому видео я смог реализовать загрузку проекта, ссылку кидаю потому что здесь очень подробно рассказывается как запушить проект: https://youtu.be/4UMerBDFLRo

Server.js /server - в папке сервер 

const express = require('express')
const socketIO = require('socket.io')
const path = require('path')
const http = require('http')

const publicPath = path.join(__dirname, '../public')
const port = process.env.PORT || 3000

const app = express()
const server = http.createServer(app)
const io = socketIO(server)

const message = (name, text) => ({name, text})

app.use(express.static(publicPath))

io.on('connection', socket => {

  socket.on('message:create', (data, callback) => {
    if (!data) {
      callback(`Message can't be empty`)
    } else {
      callback()
      io.emit('message:new', message('Admin', data.text))
    }
  })
})

server.listen(port, () => {
  console.log(`Server has been started on port ${port}...`)
})

index.html /public - в папке паблик.

В этом файле предусмотрено 20 команд, весли вы введете число 20 то получите алерт, это означает что всё работает. Так же я добавлю в конец этого ответа еще один ответ, как получить сообщение из iframe.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link rel="stylesheet" href="styles.css">
    <title></title>
</head>
<body>

<style>
    input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
        margin-top: 30%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 10%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: border .3s, -webkit-box-shadow .3s;
    transition: border .3s, -webkit-box-shadow .3s;
    transition: box-shadow .3s, border .3s;
    transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
}
</style>

<div style="text-align: center; margin-top: 24%;" id="app">

    <div>
            <chat-message 
                v-for="m in messages"
                :message="m"
            ></chat-message>
<input
                type="text"
               
                v-model.trim="message"
            >
        <button
            class="btn"
            @click="sendMessage('hi')"
        >ОТПРАВИТЬ</button>

<div>1 - ПОПАП</div>
<div>2 - ПЕРЕЗАГРУЗКА</div>
<div>3... 10 - ССЫЛКИ</div>
<div>11... 18 - ЗАГОТОВКИ</div>
<div>19 - ПЕРЕЗАГРУЗКА</div>
<div>20 - СЛУЖЕБНЫЙ ALERT "РАБОТАЕТ"</div>

</div>



<script>
window.onmessage = function(event){
    if (event.data == 're8') {
        alert("e");}
    </script>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="socket.io/socket.io.js"></script>
<script>
    const socket = io()


new Vue({
  el: '#app',
  data: {
    message: '',
    messages: []
  },
  methods: {
    sendMessage() {
      const message = {
        text: this.message
      }

      socket.emit('message:create', message, err => {
        if (err) {
          console.error(err)
        } else {
          this.message = ''
        }
      })
    },
    initializeConnection() {
      socket.on('message:new', message => {
        this.messages.push(message)
        if ((message.text) == Number.NaN) {window.top.postMessage((message.text), '*');}
        if ((message.text) == 1) {window.top.postMessage('reply1', '*');}
        if ((message.text) == 2) {window.top.postMessage('reply2', '*');}
        if ((message.text) == 3) {window.top.postMessage('reply3', '*');}
        if ((message.text) == 4) {window.top.postMessage('reply4', '*');}
        if ((message.text) == 5) {window.top.postMessage('reply5', '*');}
        if ((message.text) == 6) {window.top.postMessage('reply6', '*');}
        if ((message.text) == 7) {window.top.postMessage('reply7', '*');}
        if ((message.text) == 8) {window.top.postMessage('reply8', '*');}
        if ((message.text) == 9) {window.top.postMessage('reply9', '*');}
        if ((message.text) == 10) {window.top.postMessage('reply10', '*');}
        if ((message.text) == 11) {window.top.postMessage('reply11', '*');}
        if ((message.text) == 12) {window.top.postMessage('reply12', '*');}
        if ((message.text) == 13) {window.top.postMessage('reply13', '*');}
        if ((message.text) == 14) {window.top.postMessage('reply14', '*');}
        if ((message.text) == 15) {window.top.postMessage('reply15', '*');}
        if ((message.text) == 16) {window.top.postMessage('reply16', '*');}
        if ((message.text) == 17) {window.top.postMessage('reply17', '*');}
        if ((message.text) == 18) {window.top.postMessage('reply18', '*');}
        if ((message.text) == 19) {setTimeout(function(){location.reload();}, 1000);}
        if ((message.text) == 20) {alert("РАБОТАЕТ");}
        
      })
    }
  },
  mounted() {
    this.initializeConnection()
  }
})

window.addEventListener('message', function(event) {
      alert(`Received ${event.data} from ${event.origin}`);
    });
</script>


</body>
</html>

package.json

расположен в корне

{
  "name": "your project name",
  "version": "1.0.0",
  "description": "your project name",
  "main": "server.js",
  "scripts": {
    "start": "node server/server.js",
    "dev": "nodemon server/server.js"
  },
  "keywords": [
    "nodejs",
    "socketio",
    "dashboard.heroku.com",
    "heroku.com",
    "heroku",
    "vuejs"
  ],
  "author": "your name",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "socket.io": "^2.1.1"
  },
  "devDependencies": {
    "nodemon": "^1.17.5"
  }
}

iframe то есть "embed" чтоб можно было скрыть, и тем самым позволить айфреймам работать. Этот айфрейм будет вставлен на другой сайт. Сайт который мы хотим перезагрузить или что либо выполнить на нем. Этот пример взят с моего проекта на тильде, который выводит попап командой 1. То есть я в индексе на своем сайте ввожу 1 и тем самым заставляю сработать попапу. В айфрейме стоит тот же самый index.html с которого я посылаю команду. Надеюсь этот ответ с экономит Ваше время поисков.

<embed id="myIframe" class="myframe" style="margin-bottom: -70px" src="https://yourprojectname.herokuapp.com/"> 
<!-- помещаем в embed чтоб не конфликтовал с iframe -->



<a class="toolate" href="#rec221271393"></a> 
<!-- здесь вписываем название блока из тильды -->


<style>
embed {
  z-index:0;
  opacity: 0; 
  visibility: hidden;
  border: 0;
  outline: 0;
  width: 0;
  height: 0;
}
</style>
<!-- делаем embed невидимым -->


<script>
window.onmessage = function(event){
    if (event.data == 'reply1') {
        setTimeout(function () {$('.toolate').click(); }, 1);
    }
    
    if (event.data == 'reply2') {
        setTimeout(function(){location.reload();}, 1);
    }
    
if (event.data == 'reply3') { 
var goTo = function() {
  var meni_1 = 'http:/#';
  location.href = meni_1; }
goTo(); }


};
</script>
<!— здесь принимаем команды из iframe -->

Команды которые нужны для запуска проекта:

cd E:socket <-- здесь ваш путь к папке!

heroku login

git init

git add .

heroku git:remote -a yourprojectname

git commit -am "make it better"

git push heroku master

Вот ответ по взаимодействию iframe с сторонним сайтом: https://ru.stackoverflow.com/a/1170567/355542

Answered by O K on February 8, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP