Question

我在函数中使用document.write根据用户的选择为用户提供不同的CSS。

function blue() {
    document.write('<link rel="stylesheet" type="text/css"  href="http://ilam.irib.ir/documents/697970/237563314/blue.css" />');
}

我从锚标签中调用该函数。

function color2(){
    document.getElementById("navigation").innerHTML +='<a class="myButton" onclick="blue()" background-color:"#05c8f2";></a>'; 
}

正如您所猜测的，当点击链接时，页面会清除，我会得到一个空白页面。

有没有办法解决这个问题？我不想停止页面刷新，我只是试图以任何可能的方式解决问题！

注意：不要问我为什么要使用JavaScript添加代码，而不是直接添加到HTML代码中。这个站点是一个大型系统，我们只能访问JavaScript和CSS。所以我们可以做的就是编辑我们的页面。

Answer 1

document.write rewrites the body , as a result the only thing in your document remains is the css file you added and hence it is blank.

View this

Code from above link :-

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
  var head  = document.getElementsByTagName('head')[0];
  var link  = document.createElement('link');
  link.id   = cssId;
  link.rel  = 'stylesheet';
  link.type = 'text/css';
  link.href = 'http://website.com/css/stylesheet.css';
  link.media = 'all';
  head.appendChild(link);
}

Instead of rewriting while dom , we append the link element inside head tag

如何刷新document.write上的页面

1 个答案: