如何实现html后台导航iframe点击换url(代码)

本篇文章给大家带来的内容是关于如何实现html后台导航iframe点击换url(代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

写了个小项目,上网随便找了个后台模板 ,又不想重复加载head,footer……

想到了用iframe , 随便写写,欢迎大家指教

id=“nav_menu” 加在了二级菜单的 ul 上……..

    //导航    $('#nav_menu a').click(function(){        //选中样式        $(".am-fr").removeClass('am-icon-star');        $(this).children('.am-fr').addClass('am-icon-star');        //url        href = $(this).attr('href');        $('#iframe').attr('src',href);        return false;    });    //iframe是否加载完,并且隐藏滚动条    var iframe = document.getElementById("iframe");    if (iframe.attachEvent){      iframe.attachEvent("onload", function(){        hideS();      });    } else {      iframe.onload = function(){        hideS();      };    }    function hideS()    {      document.getElementById("iframe").scrolling="no";      document.getElementById("iframe").style.overflow="hidden";    }

 相关推荐:

怎么让iframe嵌套frameset框架,点击导航栏中超链接,浏览器url改变??_html/css_WEB-ITnose

立即学习“前端免费学习笔记(深入)”;

Bootstrap,导航栏点击效果修复(补)_html/css_WEB-ITnose

以上就是如何实现html后台导航iframe点击换url(代码)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546790.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:35:03
下一篇 2025年12月21日 18:35:12

相关推荐

  • HTML iframe标签怎么使用?HTML iframe标签的使用实例介绍

    本篇文章主要为大家介绍了关于html中的iframe标签是定义和使用的实例详情,还有关于html iframe标签的属性和优缺点的介绍。现在就让我们一起来看看吧 首先我们先看看HTML iframe标签的意思: iframe标签会创建包含另外一个文档的内联框架(即行内框架)。 再来看看iframe标…

    2025年12月21日
    000
  • 教你在iframe标签中制作滚动条样式,iframe标签的用法介绍

    本篇文章主要讲述了关于html iframe标签中关于滚动的问题,这篇文章中写了关于iframe标签的滚动条的去留和保存下来和解决动态高度的iframe加载后双滚动条等问题,现在就让我们看文章吧 首先让我们看看HTML iframe标签中关于滚动条的去留和保存: iframe嵌入页面后,我们有时需要…

    好文分享 2025年12月21日
    000
  • html如何嵌套页面?标签告诉你答案

    本篇文章主要为大家介绍了html iframe标签的介绍,让大家知道怎么通过iframe标签来为网页嵌套页面,内容很简单,大家照着这上面的来,多实践几次就懂了。希望大家都能好好学习,现在让我们来看这篇文章吧。 推荐手册:HTML5最新版参考手册 在这里小编首先介绍的是HTML中iframe标签的用法…

    2025年12月21日
    000
  • iframe的各项参数

    这次给大家带来iframe的各项参数,iframe各项参数的注意事项有哪些,下面就是实战案例,一起来看一下。 iframe src=”test.jsp” width=”100″ height=”50″ frameborder=”no” border=”0″ marginwidth=”0″ margi…

    好文分享 2025年12月21日
    000
  • iframe的去边框和无边框有哪些操作方式

    这次给大家带来iframe的去边框和无边框有哪些操作方式,iframe去边框和无边框的操作方式的注意事项有哪些,下面就是实战案例,一起来看一下。 runat=”server” 这个最好加上Iframe跳转 asp.net 可在当前iframe中跳转 src 链接到的地址URl…

    好文分享 2025年12月21日
    000
  • iframe的子页面怎样操作父页屏蔽页面弹出层效果

    这次给大家带来iframe的子页面怎样操作父页屏蔽页面弹出层效果,iframe的子页面操作父页屏蔽页面弹出层效果的注意事项有哪些,下面就是实战案例,一起来看一下。 问题:在index.html 中,iframe 引入son.html,在son.html 中如何点击某个操作,实现屏蔽整个页面,并弹出要…

    好文分享 2025年12月21日
    000
  • 使用iFrame的一些小技巧

    这次给大家带来使用iframe的一些小技巧,使用iframe的注意事项有哪些,下面就是实战案例,一起来看一下。 最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来,这其中用到了很多关于iframe的方面,总结如下: 1. 作为弹出层铺底覆盖 大家如果做过那种黑色遮罩盖住整张页面…

    好文分享 2025年12月21日
    000
  • 怎样利用iframe让自己的网页可以显示天气

    这次给大家带来怎样利用iframe让自己的网页可以显示天气,用iframe让自己的网页可以显示天气的注意事项有哪些,下面就是实战案例,一起来看一下。 css: 代码如下: *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} bod…

    好文分享 2025年12月21日
    000
  • HTML中iFrame标签有哪些用法

    这次给大家带来html中iframe标签有哪些用法,在html中iframe标签用法的注意事项有哪些,下面就是实战案例,一起来看一下。 最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来,这其中用到了很多关于iframe的方面,总结如下:  1. 作为弹出层铺底覆盖   大家如…

    好文分享 2025年12月21日
    000
  • 在HTML中iframe与frame有哪些区别

    这次给大家带来在html中iframe与frame有哪些区别,在html中使用iframe与frame的注意事项有哪些,下面就是实战案例,一起来看一下。 不知道你在项目中用过frameset属性没有,frameset这个属性是在去年我在一个在线客服系统制作中用过,因为客服系统要有固定的布局,上面一块…

    好文分享 2025年12月21日
    000
  • HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解

    winform结合html5能实现什么功能?突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下html阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧,希望能帮助到大家。 就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一个微…

    2025年12月21日 好文分享
    000
  • html中frame与iframe有哪些区别

    我们首先来看一下w3cschool教程上是如何解释的,因为本人也是从网上了解的 iframe定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 我们可以在页面布局的任何地方来使用这个iframe,它就相当于在页面的任何一个地方插入一个小窗口,用来显示其他页面 frames…

    好文分享 2025年12月21日
    000
  • html中关于iframe如何嵌套网页的实例分析

    把iframe嵌套的网页放在某一位置,只需在iframe外加个框,改变框的位置即可,如:   css如下: *{ padding: 0; margin: 0;} body{background: green} .main{ width: 80%; height: 500px; margin: 0 a…

    2025年12月21日
    000
  • html中关于iframe的allowTransparency属性的详解

    ie5.5开始支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件。1.与 iframe 元素一起使用的 allowtransparency 标签属性必须设置为 true。2.在 iframe 内容源文档,background-color 或 body 元素的 bgcolor …

    好文分享 2025年12月21日
    000
  • html iframe使用的实战总结分享

    说在前面的话,iframe是可以做很多事情的。例如:a>通过iframe实现跨域;b>使用iframe解决ie6下select遮挡不住的问题c>通过iframe解决ajax的前进后退问题d>通过iframe实现异步上传。(easyui中form组件就是用的iframe,实现表…

    2025年12月21日 好文分享
    000
  • html中iframe签的作用以及使用技巧详解

    纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了,有没有办法,让这些雷同的东西一次下载后就不用再下载,而只下载那些内容有变化区域的网页内…

    好文分享 2025年12月21日
    000
  • 怎么使用JavaScript操作iframe元素?

    答案:通过JavaScript可操作同源iframe的DOM或使用postMessage实现跨域通信,需监听onload确保加载完成,动态创建可用createElement,注意XSS、点击劫持等安全问题。 JavaScript操作iframe元素,说白了就是控制嵌入到网页中的另一个网页。你可以把它…

    2025年12月20日
    000
  • 如何用JavaScript操作iframe?

    在javascript中,操作iframe的步骤包括:1. 获取iframe元素,使用document.getelementbyid;2. 访问iframe内容,使用contentwindow或contentdocument;3. 实现跨域通信,使用postmessage api;4. 动态创建和删…

    2025年12月20日
    000
  • 怎样用JavaScript操作iframe?

    操作iframe的具体步骤如下:1.获取iframe元素:使用document.getelementbyid(‘myiframe’)。2.设置源url:通过iframe.src = ‘https://example.com’动态设置。3.跨域通信:使用…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信