0

Como eu posso passar um caminho para uma div que chama uma página HTML dentro da tag iframe ?

Exemplo, tenho o seguinte menu de ajuda que ficará disponível para o usuário acessar de qualquer tela do sistema, mas pra evitar desenvolver várias telas, eu coloquei a opção do iframe, assim eu só edito o conteudo de ajuda e, o menu fica sempre fixo.

Estou testando apenas no menu Cadastro - Logistica - Caixa Separação porém na hora de setar um caminho no codigo fonte do projeto principal eu não consigo passar o caminho direto pro help específico:

inserir a descrição da imagem aqui

Código:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style>
div.cont {
    width: 100%;
    border: 1px solid gray;
	
}

header, footer {
    padding: 1em;
    color: white;
    background-color: #34495e;
    clear: left;
    text-align: center;
	font-family: Titillium Web, sans-serif;
	
	
}
img{
width: 50px;
height: 50px;
}
body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;

	
	
	

}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
	
	

}
.clearfix{
display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 
 
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
	width: 100%;
	
	
	
	
}

.sub-menu {
    background: #444;
	box-shadow: 2px 2px 5px #888888;
	
	
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: Titillium Web, sans-serif;
    font-size: 11.5px;
    font-weight: 200;
	
	
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
	
}
.menu > li:hover {
    background: #444;
	
}
.menu li:hover > .sub-menu {
    display: block;
	
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 170px;
	
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

</style>
</head>
<body>

<div class="cont">

<header>

   <h1>PCI-HELP</h1>
</header>
<script type="text/javascript">

function clickLink(link){

	document.getElementById("iframeTeste").src = link;
}


</script>

  </div>
  
  <div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">FORÇA VENDAS</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#" onclick="clickLink('Clientes.html')">Clientes</a></li>
				<li><a href="#">Divisão</a>
				<li><a href="#">Setor</a>
				<li><a href="#">Grupo Faturamento</a>
				<li><a href="#">Tipo Cliente</a>
			   </ul>
		<li><a href="#">CADASTRO</a>	
			<ul class="sub-menu clearfix">
			<li><a href="#">Empresa</a>
			<li><a href="#">Produtos</a>
			<li><a href="#">Fornecedores</a>
			<li><a href="#">Grupo Produto</a>
				 <ul class="sub-menu">
                    <li><a href="#">Família</a></li>
					<li><a href="#">Linha</a></li>
					<li><a href="#">Categoria</a></li>
					<li><a href="#">Aplicação</a></li>
					<li><a href="#">Categoria E-Commerce</a></li>
					<li><a href="#">Sub-Categoria E-Commerce</a></li>
					<li><a href="#">Categoria PCI.APP</a></li>
					<li><a href="#">Sub-Categoria PCI.APP</a></li>
					</ul>
			<li><a href="#">Logística</a>
				 <ul class="sub-menu">
					<li><a href="#">Transportadores</a></li>
					<li><a href="#">Países</a></li>
					<li><a href="#">Municípios</a></li>
					<li><a href="#">Manutenção CEP</a></li>
					<li><a href="#">Fretes</a></li>
					<li><a href="#" onclick="clickLink('CaixaSeparacao.html')">Caixa Separação</a></li>
				 </ul>
			<li><a href="#">Fiscal</a>
				<ul class="sub-menu">
					<li><a href="#">Estados</a></li>
					<li><a href="#">Base Legal</a></li>
					<li><a href="#">Base Legal por UF</a></li>
					<li><a href="#">Transação Fiscal</a></li>
					<li><a href="#">Desmembramento de TRC</a></li>
					<li><a href="#">Imposto por NCM e Estado</a></li>
					<li><a href="#">Imposto por Produto e Estado</a></li>
				 </ul>
			<li><a href="#">Financeiro</a>
				<ul class="sub-menu">
					<li><a href="#">Formas de Pagamento</a></li>
					<li><a href="#">Feriados</a></li>
					<li><a href="#">Bancos</a></li>
				</ul>	
			<li><a href="#">Ocorrência WEB</a>
				<ul class="sub-menu">
					<li><a href="#">Áreas</a></li>
					<li><a href="#">Tipo de Ocorrências</a></li>
				</ul>
			<li><a href="#">Objetivos</a>
			<ul class="sub-menu">
					<li><a href="#">Divisão / Setor</a></li>
					<li><a href="#">Ciclo</a></li>
				</ul>
			</ul>
		<li><a href="#">PLANEJAMENTO</a>
				<ul class="sub-menu clearfix">
				<li><a href="#">Calendário</a></li>
				<li><a href="#">Preços</a></li>
				<li><a href="#">Montagem Kit</a></li>
				<li><a href="#">Ofertas</a>
						 <ul class="sub-menu">
							<li><a href="#">Oferta Produto</a></li>
							<li><a href="#">Oferta Grupo</a></li>
							<li><a href="#">Oferta Atividade</a></li>
							<li><a href="#">Oferta Catálogo</a></li>
							<li><a href="#">Oferta Valor</a></li>
						</ul>	
				<li><a href="#">Material de Apoio</a></li>
				<li><a href="#">Troca Frete</a></li>
				<li><a href="#">Cota Produto</a></li>
				<li><a href="#">Transferência</a>
					<ul class="sub-menu">
						<li><a href="#">Transferência de Divisão</a></li>
						<li><a href="#">Transferência de Setor</a></li>
						<li><a href="#">Transação de Indicante</a></li>
					</ul>	
				</ul>
		<li><a href="#">PEDIDOS</a>
			<ul class="sub-menu clearfix">
				<li><a href="#">Pedido Venda</a></li>
				<li><a href="#">Pendências</a></li>
				<li><a href="#">Reorder</a></li>
				<li><a href="#">Picking List</a></li>
			</ul>
			
		<li><a href="#">FATURAMENTO</a>	
			<ul class="sub-menu clearfix">
				<li><a href="#">Pré-Faturamento</a>
					<ul class="sub-menu">
						<li><a href="#">Conciliação de Pedidos</a></li>
						<li><a href="#">Envio de Pedidos</a></li>
						<li><a href="#">Acompanhamento</a></li>
						<li><a href="#">Log Pré-Faturamento</a></li>
					</ul>
				<li><a href="#">Liberação de Pedidos</a>
					<ul class="sub-menu">
						<li><a href="#">Agendada</a></li>
						<li><a href="#">Manual</a></li>
						<li><a href="#">Estatística Faturamento</a></li>
						<li><a href="#">Log Faturamento</a></li>
						<li><a href="#">Modelo Log</a></li>
					</ul>
				<li><a href="#">Operações</a></li>
				<li><a href="#">Notas Diversas</a></li>
				<li><a href="#">Configurações NFe</a></li>
				<li><a href="#">Notas de Débito</a>
					<ul class="sub-menu">
						<li><a href="#">Motivos</a></li>
						<li><a href="#">Emitir / Cancelar</a></li>
						<li><a href="#">Relatórios</a></li>
					</ul>
			</ul>
		<li><a href="#">FINANCEIRO</a>	
			<ul class="sub-menu clearfix">	
				<li><a href="#">Lanc. Futuros</a></li>
				<li><a href="#">Contas a Receber</a>
					<ul class="sub-menu">
						<li><a href="#">Gerenciamento de Títulos</a></li>
						<li><a href="#">Arquivo CNAB Remessa</a></li>
						<li><a href="#">Arquivo CNAB Retorno</a></li>
						<li><a href="#">Ocorrência Financeiras</a></li>
					</ul>
				<li><a href="#">Contas a Pagar</a>
					<ul class="sub-menu">
						<li><a href="#">Gerenciamento de Títulos</a></li>
						<li><a href="#">Arquivo CNAB Remessa</a></li>
						<li><a href="#">Arquivo CNAB Retorno</a></li>
						<li><a href="#">Ocorrência Financeiras</a></li>
					</ul>
				<li><a href="#">Cobrança</a>
					<ul class="sub-menu">
						<li><a href="#">Agências de Cobrança</a></li>
						<li><a href="#">Regras de Parcelamento de Dívidas</a></li>
						<li><a href="#">Limite de Negociação por Usuário</a></li>
						<li><a href="#">Renegociação de Dívidas</a></li>
						<li><a href="#">Modelo Carta de Cobrança</a></li>
						<li><a href="#">Gestão Carta de Cobrança</a></li>
					</ul>
			</ul>
		<li><a href="#">ESTOQUE</a>
			<ul class="sub-menu clearfix">	
				<li><a href="#">Áreas</a></li>
				<li><a href="#">Destinos</a></li>
				<li><a href="#">Locais</a></li>
				<li><a href="#">Movimentação</a>
					<ul class="sub-menu">
						<li><a href="#">Entrada / Retorno</a></li>
						<li><a href="#">Saída</a></li>
						<li><a href="#">Histórico</a></li>
					</ul>
				<li><a href="#">Inventário</a>
					<ul class="sub-menu">
						<li><a href="#">Contagem</a></li>
						<li><a href="#">Digitação</a></li>
					</ul>
			</ul>
		<li><a href="#">RELATÓRIOS</a>	
			<ul class="sub-menu clearfix">
				<li><a href="#">Listagens</a></li>
				<li><a href="#">Faturamento</a></li>
				<li><a href="#">Estoque</a></li>
				<li><a href="#">Exportação</a></li>
				<li><a href="#">Gerencias</a>
					<ul class="sub-menu">
						<li><a href="#">Acompanhamento de Pedidos</a></li>
						<li><a href="#">Rankings</a></li>
						<li><a href="#">Indicações</a></li>
						<li><a href="#">Análise de Produtos</a></li>
					</ul>
			</ul>
			
		<li><a href="#">DASHBOARDS</a>
		<li><a href="#">GERADOR BI</a>
		<li><a href="#">INCENTIVOS</a>
			<ul class="sub-menu clearfix">
				<li><a href="#">Parâmetros</a>
				<li><a href="#">Metas</a></li>
				<li><a href="#">Brindes</a></li>
				<li><a href="#">Apuração</a></li>
			</ul>
		<li><a href="#">VANTAGENS</a>
			<ul class="sub-menu clearfix">	
				<li><a href="#">Milhagem</a>
					<ul class="sub-menu">
						<li><a href="#">Parâmetros</a></li>
						<li><a href="#">Resgate</a></li>
					</ul>	
				<li><a href="#">Fidelidade</a>
					<ul class="sub-menu">
						<li><a href="#">Anistia</a></li>
						<li><a href="#">Premiação</a></li>
					</ul>
					</ul>	
	</ul>	
	
	<div id="teste" >
	<iframe id="iframeTeste" style="position: absolute; border: 0;    margin-top: 72px;    width: 100%;    height: 80%;    z-index:-1;">
	</iframe>
	</div>
</body>
</html>

6
  • Vc quer passar uma âncora pra dentro do iframe? Tipo, clicando, por exemplo, num link do menu ...teste.html#teste e abra uma página no iframe e faça um scroll para a div com id "teste"?
    – Sam
    Commented 6/11/2017 às 19:52
  • @DvD Mais ou menos isso, eu não estou conseguindo ser claro no que desejo fazer... Commented 6/11/2017 às 19:55
  • Se puder fazer uma explicação adicional em um exemplo prático, acho que esclareceria um pouco mais.
    – Sam
    Commented 6/11/2017 às 19:57
  • @DvD eu não estou conseguindo ser claro no que desejo fazer... "Tenho o módulo Cadastro, nele haverá um icone de ajuda, onde clicado abrirá o help destacado na pergunta acima. Quando esse menu abrir, deverá ir direto pra pagina de help do módulo de cadastro." Ou seja, dos 14 módulos que eu tenho, cada uma tem que abrir na sua página de ajuda correspondente, então na aplicação .NET do qual estes módulos estão criados, preciso passar um link no "href" p/ ir direto. Mas como preciso deixar o menu principal sempre fixo, ele não passa um link direto para cada help, ficou mais claro ? Commented 6/11/2017 às 20:01
  • "Como eu posso passar um caminho para uma div.."... que divseria essa? Não entendi "passar um caminho pra uma div".
    – Sam
    Commented 6/11/2017 às 20:20

2 Respostas 2

1

Pela afirmativa do seu comentário @LeoCaracciolo Sim. Porém ... a respeito do exemplo que disponibilizei no comentário anterior, entendo que seja dessa forma:

arquivo do menu

................
................
<li><a href="#">FORÇA VENDAS</a>
<!-- Nível 1 -->
<!-- submenu -->
................
................

    <li><a href="#">Logística</a>
    <ul class="sub-menu">
    <li><a href="#">Transportadores</a></li>
    <li><a href="#">Países</a></li>
    <li><a href="#">Municípios</a></li>
    <li><a href="#">Manutenção CEP</a></li>
    <li><a href="#">Fretes</a></li>
    <li><a href="#" onclick="clickLink('arquivoDoIframe.htm#CaixaSeparacao')">
    Caixa Separação</a></li>

.................
.................


<div id="teste" >
<iframe id="iframeTeste" style="position: absolute; border: 0; margin-top: 72px; width: 100%; height: 80%; z-index:-1;">
</iframe>
</div>

arquivoDoIframe

...............
...............
<div id="CaixaSeparacao">
   ..................
   ..................
</div>
1

Pode fazer uma função passando o url como parametro. A função seria chamada num evento onclick do menu.

function loadIframe(url) {
    var $iframe = $('#iframeTeste');
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .