duanli6834 2014-01-04 13:20
浏览 48
已采纳

从其他网站更改页面

Sorry for the vague question name - didn't know how to phrase it.

I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.

This is going to be used by clients to populate an address book by simply entering a new contacts web address.

The problem I am having is useability:

At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)

so my question (finally!)

How would achieve the functionality of

http://bartaz.github.io/sandbox.js/jquery.highlight.html

On someone else website (I have no problem writing this functionality).

FOR CLARITY** I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)

I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.

I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.

So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs

Does anyone know how best to achieve this - and any pitfalls that might befall me.

I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.

If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!

PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!

  • 写回答

1条回答 默认 最新

  • dtt78245 2014-01-04 16:44
    关注

    The ideal HTML solution

    The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.

    Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.

    Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.

    You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).

    The more robust solution

    Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.

    The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.

    Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.

    You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.

    Here's a resource I found after a quick Google search:

    https://github.com/nickcernis/html-to-markdown

    There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.

    There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计