原生js与iframe一些事

因为sem推广总是提出一些让人吐血的需求，类似于用A链接访问B链接的内容，pc跟无线又要区分不同页面，区域的不同又要显示的内容不同等等，哎呀妈妈喂，净瞎折腾。

这一次的需求是打开A链接，mobile显示B链接的内容，pc显示C链接的内容，因为访问链接不能变。因此我首先想到的就是用iframe了。

本文的前提是iframe同域，即不存在跨域情况，页面没考虑IE兼容

A.html模板大概就是下面酱紫啦：

{if $flag eq ‘mobile‘}
    <p class="title" style="display: none;">手机端title</p>
    <iframe id="iframe" name="iframe" frameborder="0"  style="width: 100%; height: 1000px; padding: 0; margin: 0" scrolling="auto"></iframe>
{else}
    <p class="title" style="display: none;">pc端title</p>
    <iframe id="iframe" name="iframe" frameborder="0"  style="width: 100%; height: 1000px; padding: 0; margin: 0" scrolling="auto"></iframe>
{/if}

pc跟手机判断我就直接用php那边判断了。为什么要这么做呢？我是这么想的：

如果我用js来判断手机跟无线，无非就是隐藏谁显示谁的问题（用这种方法的话，如果pc、手机端页面内容多的话，那么不管显示哪个页面，他都会把所有资源加载出来的，就算你display为none），或者是js里面判断客户端，然后再动态添加src，动态引入资源。哎呀，就是因为后面还要添加很多标签，所以就不用js来写了，省了麻烦。

然后用js动态添加src。如果你的src不需要携带参数的话，那么可以直接把src写在iframe里面。但是我这里因为要有在线咨询的功能，而且需要在url后面添加渠道追踪才能进行咨询（比如www.u-can.cn?channel=27），所以这个src是会变化的，还是贴代码比较清楚，原谅我不是很会表达，哈哈

A.html页面：

window.onload=function(){
       document.title=document.querySelector(‘.title‘).innerHTML;
        var ifr=document.querySelector(‘#iframe‘);
        var local_search=window.location.search;//这里可以获取到url?及后面的参数
        if(document.querySelector(‘#iframe‘)){
                ifr.style.height=window.innerHeight+‘px‘;
                var src1=‘‘;                             if(navigator.userAgent.match(/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/)){                   //mobile显示b.html页面内容
                    src1=‘/b.html‘;
                }else{                   //pc显示c.html页面内容
                    src1=‘/c.html‘;
                }
                if(local_search){
                    // 如果url存在?参数，则把参数传入，例如b.html?参数
                    ifr.src=src1+local_search;
                }else{
                    ifr.src=src1;
                } 　　　　　　}
}

当你以为一切万事大吉的时候，一堆问题又来了。我这个嵌套的页面有fixed定位的元素，比如有底部固定悬浮按钮呀，右侧悬浮咨询按钮呀，在安卓机、谷歌模拟下都正常显示，但是平常NBHH的苹果家族竟然有问题了。需求方反映说她的iphone6页面下底部按钮被甩在了文章底部。靠，返工重做。

百度一番后，决定把嵌套在页面内的fixed元素全部搬到父页面，模板改成这样：

<!--A.html--><body>
{if $flag eq ‘mobile‘}
    <p class="title" style="display: none;">mobile title</p>
    <iframe id="iframe" name="iframe" frameborder="0"  style="width: 100%; height: 1000px; padding: 0; margin: 0" scrolling="auto"></iframe>
     <a class="scroll-top" href="javascript:;">返回顶部</a>
    <div class="f_nav_box">
        <div class="main footer_nav">
            <a id="one" class="one" href="javascript:;"><img src="images/images/icon_02.jpg" alt="" >按钮1</a>
            <a class="three" >按钮2</a>
            <a id="four" class="four" href="javascript:;" >按钮3</a>
        </div>
    </div>
{else}
    <p class="title" style="display: none;">pc title</p>
    <iframe id="iframe" name="iframe" frameborder="0"  style="width: 100%; height: 1000px; padding: 0; margin: 0" scrolling="auto"></iframe>
{/if}
</body>

好了，现在苹果机上能正常显示fixed定位的按钮了。不过还有两个问题需要解决：

  1. 当页面滑动高度大于500时，显示返回顶部按钮，点击返回顶部按钮，页面回到最顶部
  2. 页面底部固定按钮1点击跳转锚点1，按钮3跳转锚点2，并让某一个复选框被勾选（这里就模拟下调用b页面的fun1函数）

解决1：

A.html页面：

window.onload=function(){
      var ifr=document.querySelector(‘#iframe‘);
      var to_top=document.querySelector(‘.scroll-top‘);      //操作iframe还是需要在它加载完后再进行吧，不然直接操作会返回undefined的
      ifr.onload=function(){
          var ifr_window=window.frames["iframe"]||ifr.contentWindow;//获取iframe窗口
          var ifr_doc= ifr_window.document;//获取iframe文档---console控制台打印输出显示<html></html>所有内容
         // ifr_doc.querySelector(‘.floattel‘).style.display=‘none‘;//这样就可以操作iframe里面的元素了
         // ifr_doc.querySelector(‘.footer‘).style.paddingBottom=‘6em‘;        //给iframe页面添加滚动事件
          ifr_window.onscroll=function(){
               var scrollTop = ifr_doc.body.scrollTop;//获取文档内滚动条滚动高度
               if(!to_top) return;
               if(scrollTop>500){//当高度大于500时，显示返回顶部按钮，否则隐藏
                   to_top.style.display=‘block‘;
               }else{
                   to_top.style.display=‘none‘;
               }
          };
          if(to_top){             //给返回顶部按钮注册点击事件--iframe窗体scrollTo(0,0)

               to_top.onclick=function(){ 
                   ifr.contentWindow.scrollTo(0,0);               };
          }
     }

}

解决2：

A.html页面：

window.onload=function(){
        var ifr=document.querySelector(‘#iframe‘);
        var one=document.querySelector(‘#one‘);
        var four=document.querySelector(‘#four‘);
         ifr.onload=function(){
                var ifr_window=window.frames["iframe"]||ifr.contentWindow;
                var ifr_doc= ifr_window.document;
                 one.onclick=function(){
                       ifr_window.location.hash=‘#sdly‘;//跳到b页面指定锚点
                       ifr_window.location = ifr_window.location;
                  };
                  four.onclick=function(){
                        ifr_window.location.hash=‘#order‘;//跳到b页面指定锚点
                        ifr_window.location = ifr_window.location;                        ifr_window.fun1();//调用b页面定义的fun1方法
                   };
         }
}

B.html页面：

<html>
<head>
    <title></title>
</head>
<body>
<div id="sdly">点击父窗口按钮1跳到这里</div>
<div id="order">点击父窗口按钮3跳到这里并执行fun1()</div>
<script>
      function fun1(){
           alert(‘我是点击父窗口的按钮触发的！‘);
       }

</script>
</body>
</html>

说明：

ifr_window.location.hash=‘#order‘;//跳到b页面指定锚点
ifr_window.location = ifr_window.location;在锚点跳转这里我在hash后面还添加了ifr_window.location = ifr_window.location;这串代码。因为测试的时候发现谷歌只响应第一次锚点跳转，后面再次点击就没有反应了，所以加上这一句后就正常了。最后这里记录下window.location的相关知识点：

window.location 对象所包含的属性

属性 描述
hash 从井号 (#) 开始的 URL（锚）
host 主机名和当前 URL 的端口号
hostname 当前 URL 的主机名
href 完整的 URL
pathname 当前 URL 的路径部分
port 当前 URL 的端口号
protocol 当前 URL 的协议
search 从问号 (?) 开始的 URL（查询部分）
时间： 2024-10-09 18:56:08

原生js与iframe一些事的相关文章

AJAX请求和跨域请求详解（原生JS、Jquery）

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python:2.7.11 web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于

跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现,现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问

React.js实现原生js拖拽效果及思考

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

原生js跨域

同事给了我一个原生js跨域的方法: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="gb2312"> <title></title> <script type="text/javascript"> function createJs(sUrl){ var oScript = document.cr

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

原生JS实现弹出窗口的拖拽（直接copy可用）

上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思路:拖动这个操作起始分为三个部分: 鼠标左键按下,此时才开始可以拖动: 鼠标移动,拖动开始:根据光标的移动给div相对应的纵轴.横轴的偏移: 鼠标左键松手,拖动结束,不可以再拖动了. 每一步需要做的事: 1中需要将初始化的拖动标示量置为true(可以拖动了).记录光标起始坐标和div的起始坐标 2中

原生Js封装的弹出框

<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>原生Js封装的弹出框-弹出窗口-页面居中-多状态可选</title> <style type="text/css"&

defer和async（原生js学习）转

(1) 页面下载过程要干的事情 页面parse完毕----DOMContentLoaded(DOM树建立完毕)----onload(全部资源下完,图片,iframe,flash这些) 注意js脚本要下载并执行完毕,dom树才能出来,因为script标签也属dom的一部分,同时因为js也许有dom的操作,所以必须要等js脚本执行完毕,才能完成dom的构建. parse的过程则可理解为对文档全部扫一遍,知道要干什么,接下来才是整个DOM的构建过程.parse the markup and set t

原生JS封装_new函数，实现new关键字的功能

一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢?现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始的new 首先,我们先new一个对象看看: 1 //创建Person构造函数,参数为name,age 2 function Person(name,age){ 3 this.name = name; 4 this.age = age; 5 } 6 //实例化对象小明 7 xm = new Person