Вспомните проблему межстраничной связи в старом проекте и фронтальную реализацию функции скачивания файлов

внешний интерфейс JavaScript

Поскольку автор поддерживал несколько более старых проектов, которые были разработаны с использованием корзин семейства jquery, некоторые из них требуют межстраничного взаимодействия и связи между родительской и дочерней страницами, поэтому я кратко изложу их здесь. Другой - фронтальная реализация функции загрузки файла.Хотя способов много, чтобы не повторять создание колеса, я подытожу его здесь.Ведь сценариев приложений под несколько страниц еще много.

Резюме статьи

  • Как реализовать связь между страницами
  • Методы реализации связи между родительскими и дочерними страницами и между дочерними страницами и дочерними страницами
  • Фронтальная реализация функции загрузки файлов

Поскольку эта статья в основном основана на javascript, она не затрагивает никаких вопросов фреймворка (если вы хотите изучить технические вопросы в vue, react и angular, вы можете перейти к другим моим статьям), поэтому давайте использовать нативный javascript для решения проблем мы упоминали выше.к вопросу.

текст

1. Как реализовать связь между страницами

Хотя мы также можем использовать postmessage для связи со страницей, здесь мы в основном используем API window.opener, что объясняется MDN следующим образом:

The Window interface's opener property returns a reference to the window that opened the window using open().

Это означает, что интерфейс открывателя, предоставляемый окном, возвращает ссылку на страницу, которая открывает текущую страницу.Другими словами, если страница A открывает B, то открыватель страницы B вернет A. Таким образом, мы можем определить глобальный метод на странице A и смонтировать его в окне, после чего страница B может получить метод страницы A через средство открытия для управления поведением страницы A.

В настоящее время основные браузеры относительно хорошо поддерживают этот API, поэтому мы можем рассмотреть возможность использования этого API в большинстве сценариев.

Чтобы удобнее было понять его сценарий приложения, мы реализуем здесь небольшую функцию: мы определяем две страницы, A и B. Когда страница A открывает страницу B, используйте страницу B, чтобы изменить цвет фона страницы A. код показывает, как показано ниже:

// A页面
<body>
    <h1>父页面A</h1>
    <a href="./b.html" target="_blank">打开b页面</a>
    <script>
        function changeColor(color) {
            document.body.style.background = color
        }
    </script>
</body>

// B页面
<body>
    <h1>父页面B</h1>
    <script>
        window.opener.changeColor('blue')
    </script>
</body>

Прежде всего, мы определяем глобальный метод на странице A. Когда вы щелкаете по тегу a, чтобы перейти на только что открытую страницу B, страница B вызывает changeColor, определенный A через открыватель, и передает параметры странице A, тем самым изменяя страница А. цвет фона. Эффект следующий:

2. Реализовать метод связи между родительскими и дочерними страницами и между дочерними страницами и дочерними страницами.

Родительская и дочерняя страницы в основном предназначены для iframe, то есть для связи между iframe и родительской страницей и страницей iframe. Например, следующая картинка:

Мы хотим понять, что родительская страница A управляет дочерними страницами A и B, и позволить дочерним страницам взаимодействовать с родительской страницей. Здесь мы в основном используем фреймы

  • contentWindow
  • родитель.окно Через contentWindow мы можем получить методы и элементы dom внутри iframe, а затем мы можем манипулировать страницей iframe.

Во-первых, давайте посмотрим на сцену, где родительская страница манипулирует дочерней страницей: родительская страница A вызывает метод дочерней страницы для передачи части данных и отображает их на дочерней странице:

// 父页面
window.onload = function() {
    let iframe1 = $id('a1').contentWindow;
    // 控制子页面dom
    iframe1.document.body.style.background = "#000"
    iframe1.loadData({a: '1'})
}

function $id(id) {
    return document.getElementById(id)
}

// 子页面
function loadData(data) {
    document.body.append(`父页面的数据数据${data.a}`)
}

Как видно из вышеприведенного, родительская страница получает объект окна iframe через contentWindow для передачи ему данных и вызова его метода.

Точно так же дочерние страницы также могут манипулировать родительскими страницами:

// 父页面
function $id(id) {
    return document.getElementById(id)
}
// 子页面
parent.window.$id('bridge').innerHTML = '子页面操控父页面dom'

Как видно из кода, мы используем parent.window для получения окна родительской страницы, а затем вызываем метод $id, предоставленный родительской страницей, для управления dom родительской страницы.

Далее решим задачу связи между дочерними страницами и дочерними страницами.На самом деле метод был упомянут выше.Мы можем использовать родительскую страницу как мост.Дочерняя страница А получает окно родительской страницы через parent.window , а затем может получить еще одну дочернюю страницу Дом страницы B, чтобы мы могли позволить подстранице A управлять подстраницей B и наоборот.

// 子页面A
let iframeBWin = parent.window.$id('a2').contentWindow
iframeBWin.onload = function() {
    iframeBWin.document.getElementById('show').innerHTML = "来自子页面A的问候"
}

Из приведенного выше кода мы можем узнать, что мы получаем дочернюю страницу B через parent.window, а затем достигаем цели общения с дочерней страницей B. Таким образом, мы можем добиться много интересного.

Обратите внимание, что все методы, которые мы обсуждали, основаны на одном и том же домене.На самом деле, существует много способов достижения междоменного взаимодействия, например, использование промежуточного iframe для создания моста и поднятие окна на верхний уровень путем установки window.domain. и т.д., но есть еще некоторые реализации.Яма, но большинство сцен может быть удовлетворено.

4. Внешний интерфейс реализует функцию загрузки файлов.

Для скачивания файлов большинство сценариев реализованы серверной частью. Интерфейсной части нужно только запросить интерфейс, но иногда этот метод будет занимать избыточные ресурсы и пропускную способность. Если контент, который необходимо загрузить, создан пользователем контент Или контент был возвращен клиенту.В это время задача загрузки может быть сгенерирована напрямую, без прохождения через сервер, что может сэкономить много ресурсов и времени.

Вообще говоря, идея реализации внешнего интерфейса заключается в динамическом создании тега, установке его атрибута загрузки и, наконец, удалении Файлы, которые не являются изображениями, обычно могут быть загружены, но если они являются изображениями, некоторые браузеры автоматически откроются. изображения, поэтому нам нужно вручную преобразовать его в данные: URL-адреса или blob: URL-адреса. Исходя из этого принципа, мы можем использовать fileReader или fetch-URL.createObjectURL. После большого тестирования я использую последний:

function download(url, filename) {
    return fetch(url).then(res => res.blob().then(blob => {
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    }))
}

Этот метод передает адрес файла и имя файла, который мы хотим использовать, чтобы мы могли изящно использовать его для загрузки.

наконец

Поскольку автор недавно пишет систему CMS с открытым исходным кодом, техническая архитектура:

  • Бэкэнд-узел+Коа+redis+JsonSchema
  • Фоновый интерфейс управления vue-cli3 + vue + ts + vuex + antd-vue + axios
  • Клиентский интерфейс react + antd + react-hooks + axios

Идея дизайна, архитектура и процесс реализации системы будут представлены позже.Приглашаем ознакомиться с более подробным введением в паблике «Интересный интерфейс».

Мы приглашаем всех учиться друг у друга и вместе исследовать границы интерфейса.

больше рекомендаций

Категории