How to pass a direct path to an html inside the iframe tag

Question

How to pass a direct path to an html inside the iframe tag

Asked 7 years ago

Viewed 232 times

0

How can I pass a path to a div calling an HTML page inside the tag iframe ?

Example, I have the following help menu that will be available for the user to access from any screen of the system, but to avoid developing multiple screens, I put the option of iframe, so I only edit the help content and, the menu is always fixed.

I’m testing only on the menu Registration - Logistic - Box Separation but at the time of setting a path in the source code of the main project I can’t pass the direct path to specific help:

Code:

<!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>

You want to pass an anchor into the iframe? Type, by clicking, for example, a link from the ...test.html#test menu and open a page in the iframe and scroll to the div with "test id"?

– Sam

2017/11/06 at 19:52
@DVD More or less that, I’m not getting to be clear on what I want to do...

– Igor Carreiro

2017/11/06 at 19:55
If I can make an additional explanation in a practical example, I think I would clarify a little more.

– Sam

2017/11/06 at 19:57
@DVD I’m not being clear in what I want to do... "I have the Register module, in it there will be a help icon, where clicked will open the help highlighted in the question above. When this menu opens, you should go straight to the help page of the registration module." That is, of the 14 modules I have, each one has to open in its corresponding help page, then in the application. NET from which these modules are created, I need to pass a link in the "href" p/ go straight. But as I need to keep the main menu always fixed, it does not pass a direct link to each help, it became clearer ?

– Igor Carreiro

2017/11/06 at 20:01
"How can I pass a path to a div.."... that divwould that be? I didn’t understand "pass a path to a div".

– Sam

2017/11/06 at 20:20
@Leocaracciolo Yes. But I don’t know how to assign a path in href that goes straight, you know? <a href=".. /PCI.HELP/index.html" target="_Blank"> I am passing the index, but I cannot pass the direct path to "Separation Box"

– Igor Carreiro

2017/11/07 at 11:19

Show 1 more comment

2 answers

1

In the affirmative of your comment @LeoCaracciolo Sim. Porém ... on the example I made available in the previous comment, I believe that this is the way:

menu file

................
................
<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>

archived

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

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.

by Rui Ferreira • **321** points · Answer 1 · 2017-11-07T12:37:21+00:00

You can do a function by passing the url as parameter. The function would be called in an onclick event from the menu.

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