11

UIWebViewHTML ページが完全に読み込まれています。のUIWebViewフレームは 320 x 480 で、横方向にスクロールします。ユーザーが現在いる現在のオフセットを取得できます。XY オフセットを使用して最も近いアンカーを見つけたいので、そのアンカーの位置に「ジャンプ」できます。これはまったく可能ですか?これを行うためのJavascriptのリソースを教えてもらえますか?

<a id="p-1">Text Text Text Text Text Text Text Text Text<a id="p-2">Text Text Text Text Text Text Text Text Text ... 

アップデート

私の非常に悲しいJSコード:

function posForElement(e)
{
    var totalOffsetY = 0;

    do
    {
        totalOffsetY += e.offsetTop;
    } while(e = e.offsetParent)

    return totalOffsetY;
}

function getClosestAnchor(locationX, locationY)
{
    var a = document.getElementsByTagName('a');

    var currentAnchor;
    for (var idx = 0; idx < a.length; ++idx)
    {
        if(a[idx].getAttribute('id') && a[idx+1])
        {
            if(posForElement(a[idx]) <= locationX && locationX <= posForElement(a[idx+1])) 
            {
                currentAnchor = a[idx];
                break;
            }
            else
            {
                currentAnchor = a[0];
            }
        }
    }

    return currentAnchor.getAttribute('id');
}

Objective-C

float pageOffset = 320.0f;

NSString *path = [[NSBundle mainBundle] pathForResource:@"GetAnchorPos" ofType:@"js"];
NSString *jsCode = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[webView stringByEvaluatingJavaScriptFromString:jsCode];

NSString *execute = [NSString stringWithFormat:@"getClosestAnchor('%f', '0')", pageOffset];
NSString *anchorID = [webView stringByEvaluatingJavaScriptFromString:execute];
4

4 に答える 4

9

[UPDATE] I rewrote the code to match all the anchors that have an id, and simplified the comparison of the norm of the vectors in my sortByDistance function.

Check my attempt on jsFiddle (the previous one was here ).

The javascript part :

// findPos : courtesy of @ppk - see http://www.quirksmode.org/js/findpos.html
var findPos = function(obj) {
    var curleft = 0,
        curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft;
        curtop = obj.offsetTop;
        while ((obj = obj.offsetParent)) {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        }
    }
    return [curleft, curtop];
};

var findClosestAnchor = function (anchors) {

    var sortByDistance = function(element1, element2) {

        var pos1 = findPos( element1 ),
            pos2 = findPos( element2 );

        // vect1 & vect2 represent 2d vectors going from the top left extremity of each element to the point positionned at the scrolled offset of the window
        var vect1 = [
                window.scrollX - pos1[0],
                window.scrollY - pos1[1]
            ],
            vect2 = [
                window.scrollX - pos2[0],
                window.scrollY - pos2[1]
            ];

        // we compare the length of the vectors using only the sum of their components squared
        // no need to find the magnitude of each (this was inspired by Mageek’s answer)
        var sqDist1 = vect1[0] * vect1[0] + vect1[1] * vect1[1],
            sqDist2 = vect2[0] * vect2[0] + vect2[1] * vect2[1];

        if ( sqDist1 <  sqDist2 ) return -1;
        else if ( sqDist1 >  sqDist2 ) return 1;
        else return 0;
    };

    // Convert the nodelist to an array, then returns the first item of the elements sorted by distance
    return Array.prototype.slice.call( anchors ).sort( sortByDistance )[0];
};

You can retrieve and cache the anchors like so when the dom is ready : var anchors = document.body.querySelectorAll('a[id]');

I’ve not tested it on a smartphone yet but I don’t see any reasons why it wouldn’t work. Here is why I used the var foo = function() {}; form (more javascript patterns).

The return Array.prototype.slice.call( anchors ).sort( sortByDistance )[0]; line is actually a bit tricky.

document.body.querySelectorAll('a['id']') returns me a NodeList with all the anchors that have the attribute "id" in the body of the current page. Sadly, a NodeList object does not have a "sort" method, and it is not possible to use the sort method of the Array prototype, as it is with some other methods, such as filter or map (NodeList.prototype.sort = Array.prototype.sort would have been really nice).

This article explains better that I could why I used Array.prototype.slice.call to turn my NodeList into an array.

And finally, I used the Array.prototype.sort method (along with a custom sortByDistance function) to compare each element of the NodeList with each other, and I only return the first item, which is the closest one.

To find the position of the elements that use fixed positionning, it is possible to use this updated version of findPos : http://www.greywyvern.com/?post=331.

My answer may not be the more efficient (drdigit’s must be more than mine) but I preferred simplicity over efficiency, and I think it’s the easiest one to maintain.

[YET ANOTHER UPDATE]

Here is a heavily modified version of findPos that works with webkit css columns (with no gaps):

// Also adapted from PPK - this guy is everywhere ! - check http://www.quirksmode.org/dom/getstyles.html
var getStyle = function(el,styleProp)
{
    if (el.currentStyle)
        var y = el.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return y;
}

// findPos : original by @ppk - see http://www.quirksmode.org/js/findpos.html
// made recursive and transformed to returns the corect position when css columns are used

var findPos = function( obj, childCoords ) {
   if ( typeof childCoords == 'undefined'  ) {
       childCoords = [0, 0];
   }

   var parentColumnWidth,
       parentHeight;

   var curleft, curtop;

   if( obj.offsetParent && ( parentColumnWidth = parseInt( getStyle( obj.offsetParent, '-webkit-column-width' ) ) ) ) {
       parentHeight = parseInt( getStyle( obj.offsetParent, 'height' ) );
       curtop = obj.offsetTop;
       column = Math.ceil( curtop / parentHeight );
       curleft = ( ( column - 1 ) * parentColumnWidth ) + ( obj.offsetLeft % parentColumnWidth );
       curtop %= parentHeight;
   }
   else {
       curleft = obj.offsetLeft;
       curtop = obj.offsetTop;
   }

   curleft += childCoords[0];
   curtop += childCoords[1];

   if( obj.offsetParent ) {
       var coords = findPos( obj.offsetParent, [curleft, curtop] );
       curleft = coords[0];
       curtop = coords[1];
   }
   return [curleft, curtop];
}
于 2012-05-27T14:25:45.327 に答える
3

scrollOffsetを使用せずにそれを作成する方法を見つけました。少し複雑なので、ご不明な点がございましたらコメントしてください。

HTML:

<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a />Text Text Text Text Text Text Text Text Text
<br /><br /><br /><br /><br />
<a />Text Text Text Text Text Text Text Text Text
</body>

CSS:

body
{
    height:3000px;
}

JS:

var tempY;

function getClosestAnchor(e)
{
    if((window.event?event.keyCode:e.which)!=97)return;
    var allAnchors=document.getElementsByTagName("a");
    var allDiff=[];
    for(var a=0;a<allAnchors.length;a++)allDiff[a]=margeY(allAnchors[a])-tempY;
    var smallest=allDiff[0];
    for(var a=1;a<allDiff.length;a++)
    {
        if(Math.abs(smallest)>Math.abs(allDiff[a]))
        {
            smallest=allDiff[a];
        }
    }
    window.scrollBy(0,smallest);
}

function margeY(obj)
{
    var posY=0;
    if(!obj.offsetParent)return;
    do posY+=obj.offsetTop;
    while(obj=obj.offsetParent);
    return posY;
}

function update(e)
{
    if(e.pageY)tempY=e.pageY;
    else tempY=e.clientY+(document.documentElement.scrollTop||document.body.scrollTop)-document.documentElement.clientTop;
}


window.onkeypress=getClosestAnchor;
window.onmousemove=update;

これがフィドルのデモンストレーションです:http://jsfiddle.net/jswuC/

ボーナス:すべてのアンカーにIDを指定する必要はありません。

于 2012-05-18T06:47:26.990 に答える
2

ふぅ!私は終えた!

JS:

var x=0,y=0;//Here are the given X and Y, you can change them
var idClosest;//Id of the nearest anchor
var smallestIndex;
var couplesXY=[];
var allAnchors;
var html=document.getElementsByTagName("html")[0];
html.style.width="3000px";//You can change 3000, it's to make the possibility of horizontal scroll
html.style.height="3000px";//Here too

function random(min,max)
{
    var nb=min+(max+1-min)*Math.random();
    return Math.floor(nb);
}
function left(obj)//A remixed function of this site http://www.quirksmode.org/js/findpos.html
{
    if(obj.style.position=="absolute")return parseInt(obj.style.left);
    var posX=0;
    if(!obj.offsetParent)return;
    do posX+=obj.offsetLeft;
    while(obj=obj.offsetParent);
    return posX;
}
function top(obj)
{
    if(obj.style.position=="absolute")return parseInt(obj.style.top);
    var posY=0;
    if(!obj.offsetParent)return;
    do posY+=obj.offsetTop;
    while(obj=obj.offsetParent);
    return posY;
}

function generateRandomAnchors()//Just for the exemple, you can delete the function if you have already anchors
{
    for(var a=0;a<50;a++)//You can change 50
    {
        var anchor=document.createElement("a");
        anchor.style.position="absolute";
        anchor.style.width=random(0,100)+"px";//You can change 100
        anchor.style.height=random(0,100)+"px";//You can change 100
        anchor.style.left=random(0,3000-parseInt(anchor.style.width))+"px";//If you changed 3000 from
        anchor.style.top=random(0,3000-parseInt(anchor.style.height))+"px";//the top, change it here
        anchor.style.backgroundColor="black";
        anchor.id="Anchor"+a;
        document.body.appendChild(anchor);
    }
}
function getAllAnchors()
{
    allAnchors=document.getElementsByTagName("a");
    for(var a=0;a<allAnchors.length;a++)
    {
        couplesXY[a]=[];
        couplesXY[a][0]=left(allAnchors[a]);
        couplesXY[a][1]=top(allAnchors[a]);
    }
}
function findClosestAnchor()
{
    var distances=[];
    for(var a=0;a<couplesXY.length;a++)distances.push(Math.pow((x-couplesXY[a][0]),2)+Math.pow((y-couplesXY[a][1]),2));//Math formula to get the distance from A to B (http://euler.ac-versailles.fr/baseeuler/lexique/notion.jsp?id=122). I removed the square root not to slow down the calculations
    var smallest=distances[0];
    smallestIndex=0;
    for(var a=1;a<distances.length;a++)if(smallest>distances[a])
    {
        smallest=distances[a];
        smallestIndex=a;
    }
    idClosest=allAnchors[smallestIndex].id;
    alert(idClosest);
}
function jumpToIt()
{
    window.scrollTo(couplesXY[smallestIndex][0],couplesXY[smallestIndex][1]);
    allAnchors[smallestIndex].style.backgroundColor="red";//Color it to see it
}

generateRandomAnchors();
getAllAnchors();
findClosestAnchor();
jumpToIt();

フィドル: http://jsfiddle.net/W8LBs/2

PS : このフィドルをスマートフォンで開くと動作しませんが (理由はわかりません)、このコードをサンプルにコピーしてスマートフォンにコピーすると動作します (ただし、<html>と の<body>セクションを指定する必要があります)。

于 2012-05-24T20:55:22.540 に答える
0

この回答は十分な注目を集めていません。

完全なサンプル、高速 (バイナリ検索)、位置のキャッシュあり。

固定の高さと幅、最も近いアンカーの ID と scrollto

<!DOCTYPE html>
<html lang="en">
<head>
<meta>
<title>Offset 2</title>
<style>
body { font-family:helvetica,arial; font-size:12px; }
</style>
<script>
var ui = reqX = reqY = null, etop = eleft = 0, ref, cache;
function createAnchors()
{
    if (!ui)
    {
        ui = document.getElementById('UIWebView');
        reqX = document.getElementById('reqX');
        reqY = document.getElementById('reqY');
        var h=[], i=0;
        while (i < 1000)
            h.push('<a>fake anchor ... ',i,'</a> <a href=#>text for anchor <b>',(i++),'</b></a> ');
        ui.innerHTML = '<div style="padding:10px;width:700px">' + h.join('') + '</div>';
        cache = [];
        ref = Array.prototype.slice.call(ui.getElementsByTagName('a'));
        i = ref.length;
        while (--i >= 0)
        if (ref[i].href.length == 0)
            ref.splice(i,1);
    }
}
function pos(i)
{
    if (!cache[i])
    {
        etop = eleft = 0;
        var e=ref[i];
        if (e.offsetParent)
        {
            do
            {
                etop += e.offsetTop;
                eleft += e.offsetLeft;
            } while ((e = e.offsetParent) && e != ui)
        }
        cache[i] = [etop, eleft];       
    }
    else
    {
        etop = cache[i][0];
        eleft = cache[i][1];
    }
}
function find()
{
    createAnchors();
    if (!/^\d+$/.test(reqX.value))
    {
        alert ('I need a number for X');
        return;
    }   
    if (!/^\d+$/.test(reqY.value))
    {
        alert ('I need a number for Y');
        return;
    }
    var
        x = reqX.value,
        y = reqY.value,
        low = 0,
        hi = ref.length + 1, 
        med,
        limit = (ui.scrollHeight > ui.offsetHeight) ? ui.scrollHeight - ui.offsetHeight : ui.offsetHeight - ui.scrollHeight;
    if (y > limit)
        y = limit;
    if (x > ui.scrollWidth)
        x = (ui.scrollWidth > ui.offsetWidth) ? ui.scrollWidth : ui.offsetWidth;
    while (low < hi)
    {
        med = (low + ((hi - low) >> 1));
        pos(med);
        if (etop == y)
        {
            low = med;
            break;
        }
        if (etop < y)
            low = med + 1;
        else
            hi = med - 1;
    }
    var ctop = etop;
    if (eleft != x)
    {
        if (eleft > x)
            while (low > 0)
            {
                pos(--low);
                if (etop < ctop || eleft < x)
                {
                    pos(++low);
                    break;
                }
            }
        else
        {
            hi = ref.length;
            while (low < hi)
            {
                pos(++low);
                if (etop > ctop || eleft > x)
                {
                    pos(--low);
                    break;
                }
            }
        }
    }
    ui.scrollTop = etop - ui.offsetTop;
    ui.scrollLeft = eleft - ui.offsetLeft;
    ref[low].style.backgroundColor = '#ff0';
    alert(
        'Requested position: ' + x + ', ' + y + 
        '\nScrollTo position: ' + ui.scrollLeft + ', '+ ui.scrollTop + 
        '\nClosest anchor id: ' + low
        );
}
</script>
</head>
<body>
<div id=UIWebView style="width:320px;height:480px;overflow:auto;border:solid 1px #000"></div>
<label for="req">X: <input id=reqX type=text size=5 maxlength=5 value=200></label>
<label for="req">Y: <input id=reqY type=text size=5 maxlength=5 value=300></label>
<input type=button value="Find closest anchor" onclick="find()">
</body>
</html>
于 2012-05-28T20:08:44.197 に答える