精华内容
下载资源
问答
  • 不等webView加载完毕,就能获取原生内容,  2.举个例子: 加载一个城市生活网页,不等加载完成,h5端获取原生定位所在城市,然后根据城市名不同加载不同的城市生活内容。。(例子不恰当,网页时可以自己定位的,...


    一:本文解决的问题:

       1.不等webView加载完毕,就能获取原生的内容

       2.举个例子: 加载一个城市生活网页,不等加载完成,h5端获取原生定位所在城市,然后根据城市名不同加载不同的城市生活内容。。(例子不恰当,网页时可以自己定位的,忽略,意思懂就行)


    二:本文默认您已经了解JS交互的一些内容了,若您不明白,请看这篇文章,里面介绍了JS交互的详细内容,demo地址等 http://blog.csdn.net/horisea/article/details/52191573


    三.进入正文

      1.项目中JS交互的地方是,一般的交互方式是这样的,网页加载完毕,传递上下文,就能交互了。

     - (void)webViewDidFinishLoad:(UIWebView *)webView{

      ——context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    _context[@"testobject"]=testJO;


      一直以来自己的认知是必须在webView加载完之后,,拿到context,将定义好的对象赋值过去;

       缺点::必须在加载完之后才能调用,那么h5端获取城市名时,此时网页还没加载好,肯定是取不到的。。

      现在开始思考解决办法:


     四 .解决办法:

     1.H5端考虑解决

    H5知道iOS已经加载好之后,再去取城市名,window.onload方法取获取城市名,看起来很有用的样子。

    当然这些肯定不是我们iOS端做的,直接让h5开发人员设置就行了,事实证明,这样是不可以的,取不到


    是不是太急了,我们不妨睡一会再去,1秒后取取试试,

    setTimeout(function(){

    }, 1000); (这里的1000是1000ms = 1s

    window.onload = function(){

    我擦,可以了

    再尝试一下,把1000ms改成1ms(毫秒) 马丹,还是可以的 。。。


    问题解决。

    思考:可能是上下文的桥接就需要这1ms的时间吧,,再低的没试过  当然这些都是H5开发人员的活,而且我觉得这个不靠谱


    2.从客户端的角度出发去解决问题

      1.webView加载的时候,就拿到上下文,然后传值,想着很完美

      2.如何提前给呢  说实话我不知道,也不知道有,但既然有这样的需要,看看前辈们有造好的轮子吧

     http://www.jianshu.com/p/939db6215436附加上博客链接将demo下载下来

    直接将UIWebView+TS_JavaScriptContext,拖进工程,这是基于运行时,给webView增加的protocol,在JavaScriptCore创建好上下文时,就进行桥接传递值了。

    然后将

     - (void)webViewDidFinishLoad:(UIWebView *)webView{

     _context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    _context[@"testobject"]=testJO;

    ; }

    替换成下面这段

    #pragma mark - Black Technology

        - (void)webView:(UIWebView *)webView didCreateJavaScriptContext:(JSContext*) ctx{

           _context[@"testobject"]=testJO;

        }

    然后就可以为所欲为了。。 至于UIWebView+TS_JavaScriptContext具体实现,自己研究吧,


    五:写在最后的:  转载注明出处

          1.JS交互必看博客:http://blog.csdn.net/horisea/article/details/52191573 里面有demo,直接替换demo里的方法就能在加载完成之前交互了额。

          2.webView离线缓存:http://blog.csdn.net/horisea/article/details/53815596

          3.RN和原生的交互:http://blog.csdn.net/horisea/article/details/54176417

          4.动态返回行高:http://blog.csdn.net/horisea/article/details/52025886

         5.带有文本框的cell数据处理:http://blog.csdn.net/horisea/article/details/51872619


    如果你喜欢这篇文章,或者有任何疑问,可以扫描第一个二维码,加楼主好友哦

    也可以扫第二个二维码,关注楼主个人微信公众号。这里有很多生活,职业,技术相关的文章哦。欢迎您的到来。

    微信号:                                             公众号


    展开全文
  • 主要介绍了原生JS实现列表内容自动向上滚动效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 下面笔者就为大家分享一篇js 原生判断内容区域是否滚动到底部的实例代码,具有很好的参考价值,希望对大家有所帮助
  • 原生js代码,手机侧滑, html5,transition动画效果,从右向左滑动到下一页。
  • 首先能做到复制文本的内容 js提供原生命令【document.execCommand(“copy”);】便可以复制用户选择的内容,做个测试

    首先能做到复制文本的内容

    js提供原生命令【document.execCommand(“copy”);】便可以复制用户选择的内容,做个测试

    document.execCommand("copy");
    

    在这里插入图片描述

    自动选择,并复制文本的内容

    输入框可做自动选择,,通过输入框自动选择然后选择文本

    var input = document.getElementById("text");
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
    alert("复制成功");
    

    如何隐藏输入框?

    使用【display: none】【hidden】?这样会隐藏输入框,会造成无法选中。
    变相的做法是把输入框显示在用户看不到的地方,可以是显示在屏幕外,或者用别的元素挡住。

    参考代码完整

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #text {
                position: absolute;
                top: -100px;
            }
        </style>
    </head>
    <body>
    
    <div class="wrapper">
        <input type="text" id="text" value="你居然敢复制我!!" style="width: 300px;" >
        <button onclick="copyText()">复制</button>
    </div>
    </body>
    <script type="text/javascript">
        function copyText() {
            text = 'aa';
            var input = document.getElementById("text");
            input.select(); // 选中文本
            document.execCommand("copy"); // 执行浏览器复制命令
            alert("复制成功");
        }
    </script>
    </html>
    
    展开全文
  • 实际需求如下图: 点击文件名,改变大小,状态以及操作的内容,点击删除恢复原装,我们...如何去改变表格的内容原生js没有vue那样的机制,数据改变重新渲染 我们针对以上三个方面来写我们的代码 图片需求有四个要...

    实际需求如下图:
    在这里插入图片描述
    点击文件名,改变大小,状态以及操作的内容,点击删除恢复原装,我们先来分析一下这个需求,以及难点。

    1. 要求:原生js渲染,所以我们不能用v-for,只能用字符串拼接或者模版字符串来写
    2. 难点:如何获取到我点击了哪一行元素,我想有很多小伙伴最大的难点就是这个了。
    3. 如何去改变表格的内容,原生js没有vue那样的机制,数据改变重新渲染
      我们针对以上三个方面来写我们的代码
      图片需求有四个要素分别是:name,status,size,operate,所以我们的数据要包含这四个字段,我们先来伪造一些数据:
    var obj = [
        {
          name: '你好',
          size: 0,
          status: 0,
          operate: 0
        },
        {
          name: '你好',
          size: 0,
          status: 0,
          operate: 0
        }, {
          name: '你好',
          size: 0,
          status: 0,
          operate: 0
        }, {
          name: '你好',
          size: 0,
          status: 0,
          operate: 0
        },
      ]
    

    我们用0和1表示status和操作显示的内容,有了数据那我们就渲染我们的list

    首先创建一个<table>,并给它一个类名tab,但是给他一个id会更好

    <table class="tab">
      </table>
    
    <thead>
              <td>名称</td>
              <td>大小</td>
              <td>状态</td>
              <td>操作</td>
            </thead>`
        for (let i = 0; i < obj.length; i++) {
          arr += `
        <tbody>
            <td class="a"><a href="#" onclick="getIndex(0)">${obj[i].name}</a></td>
            <td>${obj[i].size}</td>
            <td>${obj[i].status == 0 ? '未下载' : '已下载'}</td>
            <td class="b">${obj[i].operate == 0 ? '<span>删除</span>' : '<button onclick="getIndex(1)">删除</button>'}</td>
        </tbody>
        `
    

    用arr保存,再把arr赋值给tab.innerHTml,记得要先获取tab

    tab = document.getElementsByClassName('tab')
    

    这里要特别说明的是,因为我们给table的是一个class,所以getElementsByClassName获取到的是个数组,所以我们在赋值的时候应该是tab[0].innerHTML = arr

    专业我们的列表就渲染出来了,如图:
    在这里插入图片描述
    到这里我们需要对以上渲染列表进行一个封装,因为原生的js并不会自己重新渲染,所以我们要手动的去做

    function rendering() { //渲染函数
        arr = `
      <thead>
              <td>名称</td>
              <td>大小</td>
              <td>状态</td>
              <td>操作</td>
            </thead>`
        for (let i = 0; i < obj.length; i++) {
          arr += `
        <tbody>
            <td class="a"><a href="#" onclick="getIndex(0)">${obj[i].name}</a></td>
            <td>${obj[i].size}</td>
            <td>${obj[i].status == 0 ? '未下载' : '已下载'}</td>
            <td class="b">${obj[i].operate == 0 ? '<span>删除</span>' : '<button onclick="getIndex(1)">删除</button>'}</td>
        </tbody>
        `
        }
        tab[0].innerHTML = arr
      }
      rendering() // 调用
    

    然后我们封装我们的操作函数

    function getIndex(funIndex) {
        if (funIndex == 0) {
          var list = document.getElementsByClassName('a') // 可根据类名获取具体点击了哪个元素
        } else {
          var list = document.getElementsByClassName('b') // 可根据类名获取具体点击了哪个元素
        }
    
        for (var i = 0; i < list.length; i++) {
          list[i].onclick = (function (n) {
            return function () {
              console.log(n)
              if (funIndex == 0) {
                obj[n].size = 520
                obj[n].status = 1
                obj[n].operate = 1
              } else {
                obj[n].size = 0
                obj[n].status = 0
                obj[n].operate = 0
              }
              rendering() // 重新调用
            }
          })(i)
        }
      }
    

    这里是根据点击的位置不同分别获取不同的元素,进行不同的操作,然后给所获取到的元素都添加一个方法,当点击这个元素的时候就会把与之对应的索引拿的,然后再去改变对于数据的内容,再次调用渲染函数就行了。

    展开全文
  • 基于内容语义的原生广告核心技术.pdf
  • 原生JS改变HTML内容

    万次阅读 2015-05-21 15:58:38
    最近发现总是把原生JS语法和诸多框架库神马的语法搞混,打算暂时弃用各种库,回归到原生来,好好抠一抠所有的细节,跳一跳各种坑,才能飞得更远。PS. 突然想起冰火里面三眼乌鸦对布兰说的那句话——You'll never ...

    最近发现总是把原生JS语法和诸多框架库神马的语法搞混,打算暂时弃用各种库,回归到原生来,好好抠一抠所有的细节,跳一跳各种坑,才能飞得更远。PS. 突然想起冰火里面三眼乌鸦对布兰说的那句话——You’ll never walk………but you’ll fly. 期待看到布兰变龙(maybe)飞起来的那天~~~

    well,快点回神!

    改变 HTML 输出流

    JavaScript 能够创建动态的 HTML 内容:
    在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
    提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

    改变 HTML 内容

    修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
    如需改变 HTML 元素的内容,请使用这个语法:

    document.getElementById(id).innerHTML=new HTML

    改变 HTML 属性

    如需改变 HTML 元素的属性,请使用这个语法:

    document.getElementById(id).attribute=new value

    几个容易混淆的用法:

    1、innerHtml是标签内的文本,输入输出到该DOM内部纯HTML代码(流);
    (获得td、div等html元素时候,它们是没有value或是text属性,只能用innerHtml)

    2、value是表单元素特有的属性,输入输出的是转义文本(字符串);
    (Button、CheckBox、Radio)随表单一起发送的值;
    (Reset、Submit)标签;
    (Text、Hidden)默认值;
    (File、Password)
    (注: Text控件用value有效)

    3、htmltext都是jquery/zepto的方法,只对jq对象有用

    展开全文
  • 原生js修改文本内容

    千次阅读 2017-12-07 22:39:00
    关于修改文本的内容,有好多不同的写法,今天实现一个简单的的案例就是点击“编辑”按钮,文本内容可以保存。看下图: 这个例子想要实现的效果就是点击编辑,出现文本框,然后可以更改内容,关键就是在实际项目中...
  • <script> window.onload = function () { var url = "data/init.json"/*json文件url*/ var request = new XMLHttpRequest(); request.open("get", url);/*设置请求方法与路径*/ request.send(null);...
  • 使用原生javascript生成html内容

    千次阅读 2016-11-08 16:54:49
    需求在网站A增加一个导航栏和侧边栏,但是导航栏和侧边栏内容放在另个网站B,需要在网站A直接引用网站B的...使用原生javascript 跨域问题 参考源代码html内容:<!DOCTYPE html> <title>js加载模块 <script type=
  • 原生Js实现删除li标签一行内容

    千次阅读 2017-07-28 11:55:29
    原生Js实现删除li标签一行内容。 利用面向对象思想完成买家信息删除功能。
  • 原生 JS 监听 复制 copy 事件,追加版权信息 <div class="empty-font">空心字</div> <script type="text/javascript"> //监听整个页面的 copy 事件 document.addEventListener('copy',function...
  • 原生js获取div的内容

    千次阅读 2020-05-17 14:36:35
    两种方式 <div id="test">hello, word!</div> <script type="text/javascript"> var html = document.getElementById('test').... var text = document.getElementById('test').innerText .../
  • 原生广告

    千次阅读 2015-03-13 13:57:42
    按特征分,原生广告可分为:内嵌品牌的内容、插播广告、激发互动广告以及可实现点击呼叫的搜索结果。 而对于原生广告的设计,按照IAB的定义要解决如下6个问题: 1. 广告的设计格式,是不是和当前页面的风格一致。 ...
  • 给指定元素的后面追加一些自己想要实现的效果或者是一些属性之类的,有木有遇到过,接下来为大家详细介绍下追加的实现代码,感兴趣的朋友可以参考下哈
  • js原生实现鼠标点击元素复制指定的内容:直接看代码吧: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ...
  • 原生JS实现复制图片和文本内容

    千次阅读 2020-01-06 00:49:33
    关于JS操作剪贴板的那些事原生JS实现复制Range介绍使用getSelection介绍使用execCommandcopy代码 最近开发上有个需求是要实现一键复制图片的功能,查阅了相关资料后发现有几种可以实现的方式,但总体而言网上的信息...
  • 原生js实现复制浏览器内容

    千次阅读 2017-04-21 13:28:34
    // 将内容复制到剪贴板 document.execCommand( "copy" ); // 删除创建元素 document.body.removeChild(aux); //提示 alert( "复制内容成功:" + aux.value); } script > html >
  • 逻辑判断内容滚动到底需要知道的信息 内容区域的真实高度(也就是滚动区域) 滚动条距离顶部的位置 内容区域的可见高度 分别对应下面的三个API。element.scrollHeight 获取元素内容高度,,,【只读属性】 element....
  • 原生js脚本写的一个html文件,内容包括导航菜单点击去锚点,还有动画效果(都是用js实现的),鼠标滚轮滑动到对应的内容,导航菜单会互动,
  • 4.2原生软件可精简内容详细列表 http://bbs.gfan.com/android-5531642-1-1.html Andriod 4.2系统包 说明 ApplicationsProvider.apk 应用程序存储、 程序管理器(不可删)...
  • 行业媒体发布了一篇名为“走向云原生:人们需要知道的6个基本内容(Going Cloud Native:6 Essential Things You Need to Know)”的文章,讨论了解术语“云原生”的关键方法,并描述了如何利用云原生功能来加快开发...
  • 主要介绍了原生JS实现旋转轮播图+文字内容切换效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 原生js实现对select下拉列表的内容过滤 场景描述: 笔者在工作的过程中,经常碰到这样的业务场景。客户要求一个下拉列表框旁边要有一个输入过滤的功能:如下图所示 由于在一个项目中出现了好多这样的需求,笔者...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 281,885
精华内容 112,754
关键字:

原生内容