Entendendo os Métodos de Redirecionamento em Iframes

Em estruturas de páginas com iframes, diferentes métodos de redirecionamento controlam a navegação entre níveis. A propriedade top.location.href direciona para a página mais externa do contexto, enquanto parent.loctaion.href navega para a página pai imediata. Para alterar a URL da página atual, seja principal ou dentro de um iframe, utiliza-se window.location.href ou location.href.

top.location.href: Redirecionamento para a Página Mais Externa

Este exemplo demonstra uma chamada assíncrona para atualização de senha, seguida de redirecionamento para a página de login usando o contexto mais externo.

// Função para atualizar senha via API e redirecionar
const atualizarSenha = async (usuario, novaSenha, senhaAntiga, tokenAuth) => {
  try {
    const resposta = await fetch('https://api.exemplo.com/auth/alterar-senha', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${tokenAuth}`
      },
      body: JSON.stringify({
        nomeUsuario: usuario,
        senhaNova: novaSenha,
        senhaAnterior: senhaAntiga
      })
    });
    const dados = await resposta.json();
    if (dados.status === 'sucesso') {
      // Limpar armazenamento local
      localStorage.removeItem('tokenUsuario');
      // Redirecionar para a página de login no nível mais alto
      top.location.href = './login.html';
    } else {
      document.getElementById('mensagemErro').textContent = dados.mensagem;
    }
  } catch (erro) {
    console.error('Falha na requisição:', erro);
  }
};

parent.location.href: Navegação para a Página Pai

Em um controlador AngularJS, esta função recupera uma lista de funções e trata erros redirecionando a página pai.

// Controlador AngularJS para gerenciamento de funções
angular.module('sistema').controller('FuncoesCtrl', function($scope, $http) {
  $scope.carregarFuncoes = function() {
    $http.get('/api/funcoes', { params: { chave: $scope.chaveAcesso } })
      .then(function(resposta) {
        $scope.listaFuncoes = resposta.data;
        // Identificar a função selecionada a partir de um campo oculto
        const idSelecionado = document.getElementById('idFuncaoSelecionada').value;
        $scope.funcaoAtual = $scope.listaFuncoes.find(f => f.id === idSelecionado) || $scope.listaFuncoes[0];
      })
      .catch(function(erro) {
        // Redirecionar a página pai em caso de falha
        parent.location.href = './erro.html';
      });
  };
  
  $scope.atualizarModelo = function(funcaoId) {
    $http.get(`/api/modelos-funcao/${funcaoId}`, { params: { chave: $scope.chaveAcesso } })
      .then(function(resposta) {
        document.getElementById('campoExperiencia').value = resposta.data.frequencia;
      });
  };
});

window.location.href: Redirecionamento da Página Atual

Ao submeter um formulário parra adicioanr um tipo de pagamento, este método atualiza a URL da página atual após sucesso.

// Manipulação de envio de formulário para cadastro
document.getElementById('formCadastro').addEventListener('submit', async function(evento) {
  evento.preventDefault();
  const formData = new FormData(this);
  const dados = {};
  formData.forEach((valor, chave) => { dados[chave] = valor; });
  
  try {
    const resposta = await fetch('/api/tipos-pagamento', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        identificador: dados.id,
        nomePlataforma: dados.nomePlataforma,
        urlPlataforma: dados.urlPlataforma,
        tipoPlataforma: dados.tipoPlataforma,
        tokenAutenticacao: dados.token
      })
    });
    const resultado = await resposta.json();
    if (resultado.sucesso) {
      // Redirecionar para a lista após o cadastro
      window.location.href = './lista-pagamentos.html';
    } else {
      document.getElementById('avisoErro').textContent = resultado.mensagem;
    }
  } catch (erro) {
    // Redirecionar para página de erro em caso de falha na requisição
    window.location.href = './pagina-erro.html';
  }
});