我们经常有这样的需求,需要通过自己的域名来包装某个专题或者是合作方的站点,比如:为了方便记忆希望http://topic.hmzxin.com/acts/2009_girl/index.php 推广时使用girl.cdqss.com这样的域名。这通常需要两个步骤:
1、解析域名到需要包含的站点;
2、合作方对服务器进行配置以便支持新的站点。
这种方式多少还是有些麻烦,有些时候这种方式根本就无法实现,比如:我们开通个人空间允许用于导入外部的网站,然后统一通过我们的个性域名进行访问,如:yemaozi.cdqss.com是个人空间,yemaozi.cdqss.com/taobao指向我的淘宝店,yemaozi.cdqss.com/paipai指向我的拍拍店等等,我们不可能让淘宝和拍拍进行相应的配置。所以,我们使用变通的解决办法,把域名解析到我们自己的服务器,然后根据访问的目录动态的导入不同的地址,在站点下建一个文件内容如下:
<?php
$host = $_SERVER['HTTP_HOST'];
$host_match_result = preg_match('/([^\.]+)\.cdqss\.com/i', $host, $host_matches);
//截取店铺类型
$url = $_SERVER['REQUEST_URI'];
$url_match_result = preg_match('/([^\/]+)/i', $url, $url_matches);
//安全检查并获取用户名,正确的访问例子为:http://yemaozi.cdqss.com/taobao
if(!$host_match_result || !$url_match_result){
header('Location:http://www.cdqss.com');
exit();
}
$username = addslashes($host_matches[1]); //执行转义操作;
$shoptype = addslashes($url_matches[1]); //执行转义操作
//查询对应的店铺地址
//$row代表查询的结果
//$url = $row['linkurl']; ,设$row['linkurl'] = 'http://www.taobao.com'
$url = 'http://www.taobao.com';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $username;?> - 的个性店铺</title>
</head>
<frameset frameborder="no" border="0" framespacing="0">
<frame src="<?php echo $url;?>" name="topFrame" scrolling="yes" noresize="noresize" id="topFrame" title="topFrame" />
</frameset>
<body>
</body>
</html>
这时当我们访问服务器时,就已经使用我们的域名进行访问了。Frameset可以很好的完成页面的自适应。其实使用iframe也可以实现,但是iframe在自适应的处理上非常麻烦,进行跨域访问时会有安全错误提示,所以解决很麻烦,感兴趣的可以参考下面的文章:
iframe全跨域高度自适应解决方案
再谈iframe自适应高度
Iframe高度自适应(兼容IE/Firefox、同域/跨域)
分享到:
相关推荐
网页内自适应高度框架JS是一种基于JavaScript实现的页面布局技术,它允许开发者创建灵活的页面结构,自动调整元素的高度以适应不同的屏幕尺寸和浏览器窗口大小。这种技术在响应式网页设计中尤其重要,因为它能够确保...
下面,我们将详细解析如何通过调整\frameset框架内的元素属性以及运用JavaScript脚本来实现滚动条的自适应显示。 ### \frameset框架与滚动条的关系 \frameset是HTML中用于创建多窗格布局的一种方式,它允许在一个...
在HTML的历史发展中,"frameset" 和 "frame" 是早期用于实现多窗口或区域页面布局的技术。这些技术允许开发者将网页分割成多个独立的部分,每个部分可以加载不同的网页内容,从而实现更复杂的界面设计。 **frameset...
要实现动态调节,开发者通常需要利用JavaScript或者jQuery等JavaScript库来实时监测子页面内容的高度变化。当检测到变化时,通过修改父框架的CSS样式(如`height`属性)来调整框架大小。 4. **实例实现步骤** - *...
最后,由于frameset在现代网页设计中已逐渐被淘汰,学习这些知识的同时,也需要了解和掌握更现代的布局技术,如Flexbox和Grid布局,以及如何使用JavaScript和Ajax实现动态内容加载,以适应不断发展的Web标准。
需要注意的是,`document.frames`是老式的方法,用于访问`<frameset>`内的`<frame>`元素,而在现代浏览器中,更推荐使用`contentWindow`或`contentDocument`来访问`<iframe>`的内容。在这个例子中,我们使用了`...
在压缩包中的 "frameset实例" 文件,可能包含了一系列使用`frameset`创建的不同布局和样式的示例页面,通过分析和学习这些实例,开发者可以更好地理解和掌握如何在实际项目中应用`frameset`,创建出既实用又美观的...
对于"frame frameset左右收缩"和"iframe左右收缩",这可能是指在设计网页布局时,希望对这些框架进行自适应调整,使得它们能够根据浏览器窗口的宽度动态改变宽度,以实现响应式设计。这通常需要结合CSS(层叠样式表...
通过使用媒体查询(Media Queries)和灵活的布局技术,页面可以自适应不同尺寸的屏幕,确保在任何设备上都能提供良好的用户体验。 5. **网页性能优化**:考虑页面加载速度和用户体验,我们需要关注如图片压缩、代码...
除了基础的HTML5和响应式设计,这个模板可能还包含JavaScript和jQuery的使用,用于实现更丰富的交互效果,如滑动导航、下拉菜单、滚动动画等。JavaScript库和框架,如jQuery或Vue.js,可以帮助开发者更轻松地处理DOM...
可以使用浮动和margin-left值实现左不动右边自适应的两列布局。 2. 两列等高布局 可以使用浮动和负边距实现两列等高布局。 3. 右侧左宽、中间自适应 可以使用浮动和margin-left值实现右侧左宽、中间自适应的布局...
开发者通常需要深入研究CSS盒模型,理解不同浏览器对盒模型的处理方式,并利用reset CSS或 normalize.css来消除浏览器之间的默认样式差异,或者使用百分比宽度配合max-width和min-width属性来实现自适应布局。...
此外,框架可以嵌套,形成更复杂的布局结构,例如在一个框架内再包含两个或更多框架,通过`<frameset>`标签的`rows`和`cols`属性结合使用可以实现。 在框架的链接操作中,可以设定链接的目标框架,这需要确保框架已...
虽然描述中没有特别提及CSS,但可以推断,为了实现视觉上的吸引力和一致性,CSS在这些页面的美化中起到了关键作用。 此外,这个项目作为“网页设计期末作业源码”,可能还包括了对HTML5新特性的应用,例如语义化...
然而,`<iframe>`的使用也有其局限性,包括可能影响页面加载速度、SEO优化以及对某些浏览器的兼容性问题。因此,尽管`<iframe>`在某些场景下仍被使用,但在追求高性能和兼容性的现代网页设计中,更推荐使用HTML5和...
这个"**cpts_1355_cag.zip**"压缩包文件包含了一个完整的HTML5网站模板,专为实现跨平台、自适应的用户体验而设计。这样的模板适用于创建响应式网站,无论用户是在桌面电脑、平板电脑还是智能手机上访问,都能提供...
JavaScript可以通过事件监听(如`onclick`、`onmouseover`等)来响应用户的操作,并通过AJAX实现页面的部分更新,无需刷新整个页面。 最后,关于"虚拟主机空间代理"这一主题,这可能意味着源码中包含了一些服务器...
开发者会使用表格或CSS布局来固定各个元素的位置。 2. **响应式模板**:响应式设计是现代网页设计的重要趋势,它允许网页根据用户的设备和屏幕尺寸自动调整布局。XHTML中的响应式模板会使用媒体查询(Media Queries...
例如,使用Flexbox可以轻松实现自适应高度和流体布局,无需依赖传统的表格布局,从而增强网页的灵活性和可维护性。 #### 四、代码规范与校验 遵守XHTML代码规范不仅有助于提升代码质量,还能确保网页的兼容性和...
3. 网页表格百分比设置:在网页设计中,如果希望表格随窗口大小同步放大或缩小,可以在表格属性面板中设置宽度和高度为百分比,通常是100%,以实现自适应布局。 4. HTML 标记:`<head>` 和 `<head/>` 标签用于定义...