怎么把本页面的CSS样式传到window.open 打开的新页面
时间: 2024-03-17 19:43:41 浏览: 20
要将本页面的 CSS 样式传到 `window.open` 打开的新页面,你可以在新页面中引入本页面的 CSS 文件,或者将本页面的 CSS 样式直接写入到新页面的 `<style>` 标签中。
以下是两种实现方式:
1. 在新页面中引入本页面的 CSS 文件:
在本页面中,你可以将 CSS 样式文件的链接地址作为参数传递给 `window.open` 方法:
```javascript
window.open('newPage.html?css=style.css', '_blank');
```
在新页面的 HTML 文件中,你可以通过 JavaScript 获取 URL 参数,然后将 CSS 文件的链接地址添加到 `<head>` 标签中:
```html
<head>
<meta charset="UTF-8">
<title>New Page</title>
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var cssFile = getParameterByName('css');
if (cssFile) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = cssFile;
document.head.appendChild(cssLink);
}
</script>
</head>
```
2. 将本页面的 CSS 样式直接写入到新页面的 `<style>` 标签中:
在本页面中,你可以将 CSS 样式代码作为参数传递给 `window.open` 方法:
```javascript
var cssCode = 'body { background-color: #f0f0f0; }';
window.open('newPage.html?css=' + encodeURIComponent(cssCode), '_blank');
```
在新页面的 HTML 文件中,你可以通过 JavaScript 获取 URL 参数,然后将 CSS 样式代码添加到 `<head>` 标签中的 `<style>` 标签中:
```html
<head>
<meta charset="UTF-8">
<title>New Page</title>
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var cssCode = getParameterByName('css');
if (cssCode) {
var cssStyle = document.createElement('style');
cssStyle.type = 'text/css';
cssStyle.appendChild(document.createTextNode(cssCode));
document.head.appendChild(cssStyle);
}
</script>
</head>
```