使用iframe调用指定网页的特定位置(显示目标网页某区域的我想要的内容)
分类,标签:
有些时候我们并不需要显示iframe标签属性src指定的目标网页的所有内容，往往只需要显示某一特定区域。现有两种实现方法提供，但严禁使用此方法用于欺骗、隐瞒目的。
& & & 这里用到了Iframe的一些属性，稍微介绍下：
& & & &1. marginheight 属性规定框架内容与框架的上方和下方之间的高度，以像素计。
& & & &2. maiginweidth 属性规定框架内容与框架的左侧和右侧之间的高度，以像素计。
& & & &3. vspace y方向显示的区域，负值为从目标网页最上面开始截取的部分，正值为y值+从上部开始内容区域
& & & &4. hsapce x方向显示的区域，负值为从目标网页左侧开始截图的部分，正值为x值+从左侧开始内如区域
& & & &5. src 目标网页的地址，可以为html，asp，文本等内如
& & & &6. frameborder 框架边框，0为无边框（画中画效果）
& & & &7. scrolling 是否显示滚动，yes显示
& & & &8. align：指定浮动窗口内的页面相对于浮动窗口的位置，它的值有left、right、top、middle、bottom
& & & &9. marginwidth、marginheight 目标网页被框架覆盖的深度
& & & 方法一,以百度主页为例，去掉百度的Logo部分，代码与效果如下：
& & &title&Iframe标签显示目标网页的指定区域，方法1&/title&
&div align="center"&
&iframe width="800" height="600" src="" scrolling="no" hspace="-100" vspace="-150"&&/iframe&&
&/div&&/body&
& &方法二，使用DIV控制，这也是使用iframe框架的好处，因为它不像frame，它可以显示的网页的任意区域代码如下：
& & &title&Iframe标签显示目标网页的指定区域，方法1&/title&
&div align="center" style="margin:0"&
& & &div style="width:800height:600overflow:border:0px"&&
& & & & &&div style="width:500height:800margin:-153px 0px&
& & & & & & & &iFrame src="" width="800" height="600" scrolling="no"&
& & & & & & &&/iFrame&
& & & & &&/div&&
& & &&/div&&
目前尚未找到按坐标来控制的办法，只有采用按顶、左、右边跑的方法来控制，因此要制作一个文件来完全调用目标网页内容，然后再在需要调用指定内容的地方使用iframe代码调用。
&&& 首先建立一个完全调用目标网页的文件，命名为files.html，代码如下：
&meta http-equiv=”Content-Type” content=”text/ charset=gb2312″&
&&title&AUDCNY&/title&
&body& &iframe src=”目标网址” width=”980″ height=”700″ frameborder=”0″ scrolling=”no” style=”position: top: -120 left: -680”&&/iframe&
&&& 这个页面用iframe框架引用了目标页面，并且用CSS定位设定了框架浮动位置(top: -120 left: -680px)。当然也可以按右边距控制，如right:680px，距离大小可以根据情况调整，直到调整到合适的位置。
&&& 然后在需要调用目标内容的文件中合适的位置放入以下代码：
&iframe src=”这里填写上面保存的html文档的地址” width=”300″ height=”230″ frameborder=”0″ scrolling=”no”&&/iframe&
&&& 高宽可以根据情况调整，为了使调用的内容正常、正确显示的我们设定的位置，大家可以修改files.html里的边距控制量以达到最佳效果。
& 上一篇：
：下一篇 &
发表我的评论wordpress调用文章内容中头一张图片-WordPress-网页制作-壹聚教程网wordpress调用文章内容中头一张图片
上一节跟大家分享了怎样不通过插件来实现首页图片集的展示，就像时美网首页的图片集一样，代码我们是添加了，但是如果打开网页，我们会发现网页报错，因为我们还没有实现从文章中获取图片的功能。
本节，高时银博客就跟大家分享一下&怎样调用文章中的第一张图片&。
方法很简单，在主题模板函数文件function.php中添加下面这段代码：
//获取文章首张图片
function _that_image() {
global $post, $
$first_img = &;
ob_start();
ob_end_clean();
$output = _all(&/&img.+src=[\'&]([^\'&]+)[\'&].*&/i&, $post-&post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = &/images/default.jpg&;}return $first_}
参考函数二：
function catch_the_image( $id ) {
& // global $post, $
& $first_img = '';
& // 如果设置了
& $post_thumbnail_id = get_post_thumbnail_id( $id );
& if ( $post_thumbnail_id ) {
&&& $output = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
&&& $first_img = $output[0];
& else { // 没有缩略图，查找文章中的第一幅图片
&&& ob_start();
&&& ob_end_clean();
&&& $output = preg_match_all('/&img.+src=[\'&]([^\'&]+)[\'&].*&/i', $post-&post_content, $matches);
&&& $first_img = $matches [1] [0];
&&& if(empty($first_img)){ // 既www.111cn.net没有缩略图，文中也没有图，设置一幅默认的图片
&&&&& $first_img = &/images/default.jpg&;
& return $first_
2. 在页面需要的地方增加如下标签代码
&img src=&&?php echo catch_that_image() ?&& alt=&& /&
这个函数的作用是获取到文章中的第一张图片的地址，然后，再将这个地址传递到上一节中的图片地址中，就实现了缩略图片的调用。
自动读取文章中的第一张插图为缩略图
如果连文章中也没有插图，那么就读取设置好的默认图片。
//thumbnails
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 140 ,true );
function don_the_thumbnail() {
// 判断该文章是否设置的缩略图，如果有则直接显示
if ( has_post_thumbnail() ) {
echo '&a href=&'.get_permalink().'&&';
the_post_thumbnail();
echo '&/a&';
} else { //如果文章没有设置缩略图，则查找文章内是否包含图片
$content = $post-&post_
preg_match_all('/&img.*?(?: |\\t|\\r|\\n)?src=[\'&]?(.+?)[\'&]?(?:(?: |\\t|\\r|\\n)+.*?)?&/sim', $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n & 0){ // 如果文章内包含有图片，就用第一张图片做为缩略图
echo '&a href=&'.get_permalink().'&&&img src=&'.$strResult[1][0].'& /&&/a&';
}else { // 如果文章内没有图片，则用默认的图片。
echo '&a href=&'.get_permalink().'&&&img src=&'.get_bloginfo('template_url').'/img/thumbnail.jpg& /&&/a&';
上一节的缩略图调用，我们还可以做成侧边栏的图片展示和相关文章的图片展示，这个，你都可以根据自己的需要来设计。呵呵，今天就分享到这里了。
上一页： &&&&&下一页：相关内容wordpress调用特定文章列表的技巧分享
作者：佚名
字体：[ ] 来源：互联网 时间：08-03 14:32:13
在 wordpress主题制作开发 中经常会需要在特定的页面中调用出指定的文章或文章列表，接下来教大家如何调用出 wordpress文章列表 。
调用网站最新文章：
代码如下:&?phpquery_posts('showposts=10&orderby=new'); //showposts=10表示10篇while(have_posts()): the_post();?&&li&&a href="&?php the_permalink(); ?&"target="_blank"&&?php the_title() ?&&/a&&/li& //这里可以写成你自己需要的样式&? ?&
调用随机文章：
代码如下:&?phpquery_posts('showposts=10&orderby=rand'); //showposts=10表示10篇while(have_posts()): the_post();?&&li&&a href="&?php the_permalink(); ?&"target="_blank"&&?php the_title() ?&&/a&&/li& //这里可以写成你自己需要的样式&? ?&
调用某个分类下的最新文章：
代码如下:&?phpquery_posts('showposts=10&cat=1'); //cat=1为调用ID为1的分类下文章while(have_posts()) : the_post(); ?&&li&&a href="&?php the_permalink() ?&"title="&?php the_title(); ?&"&&?php the_title(); ?&&/a&&/li&&? ?&
排除某个分类下的文章：
代码如下:&?phpquery_posts('showposts=10&cat=-1'); //cat=-1为排除ID为1的分类下文章while(have_posts()) : the_post(); ?&&li&&a href="&?php the_permalink() ?&"title="&?php the_title(); ?&"&&?php the_title(); ?&&/a&&/li&&? ?&以上就是文章列表的调用方法，可以将例子中的代码结合起来达到你需要的效果。
大家感兴趣的内容
12345678910
最近更新的内容查看: 5020|回复: 6
wordpress页面调用分类文章并分页
wordpress博客无法直接将文章发表到页面，但可以通过修改页面模板代码来实现页面调用分类文章，这样发表文章时选择该分类就可以将文章发表到该页面了。刚建博客的时候我也曾为此事烦恼，后来通过学习解决了这一个问题，并总结成一篇文章随着使用的深入我发现了通过这种方法来实现wordpress页面调用分类文章无法分页，尽管安装了分页插件WP-PageNavi，只能在页面结尾看到分页信息，但点击下一页的时候却无法实现跳转。http://www.1314meili.net
4.jpg (20.06 KB, 下载次数: 2)
11:37 上传
3.jpg (34.1 KB, 下载次数: 1)
11:37 上传
今天我终于解决了这个问题，原来只需要把&?php query_posts(‘showposts=15&cat=3,4′);?&改成如下的代码就行了。
$limit=get_option(‘posts_per_page’);
$paged=(get_query_var(‘paged’))?get_query_var(‘paged’):1;
query_posts(‘cat=5&showposts=’ .$limit .’&paged=’ .$paged);
$wp_query-&is_archive=
$wp_query-&is_home=?&
如果要实现分页，只需要加上下面的代码
if (function_exists(‘wp_pagenavi’)) wp_pagenavi();
else { ?&&div&&?php next_posts_link(‘ next &’) ?&&/div&
&div&&?php previous_posts_link(‘& previous’) ?&&/div&
&?php } ?&
最近正在研究wp博客系统
青岛五四社区
wp个人感觉比较麻烦
学习了！接着实践一下wp
泰安人才网看看神马情况帮助一个朋友修改css文件 加了东西在哪里呢
Powered by