After referring to some previous practices, we adopted some workarounds and added some additional tags to better implement JavaScript running in innerhtml, so that the modules on the page can
Good interaction and data sharing.
Let's take a look at the following example:
<HTML>
<Head>
</Head>
<SCRIPT>
VaR Title = "hello ";
VaR time = 0;
VaR author = "vickenyang ";
VaR email = "</SCRIPT>
<Body>
<Div id = "div_1">
<Span style = "display: none"> hidden </span>
Hehe
<! -- Bs -->
<SCRIPT>
Document. Write ("first ");
</SCRIPT>
<! -- Es -->
This is the first page!
<Br>
<! -- Bs -->
<SCRIPT>
Time ++;
Document. Write (Title + time + author );
// Alert (time );
Document. Write ("<br> ---------------");
</SCRIPT>
<! -- Es -->
<Input type = "text" name = "test" value = "test">
</Div>
<SCRIPT>
Function refreshdiv (Div)
{
VaR html = "";
Function changediv ()
{
VaR oldwrite = Document. Write;
VaR oldwriteln = Document. writeln;
Document. Write = function (STR)
{
HTML + = STR;
}
Document. writeln = function (STR)
{
HTML + = STR + "N ";
}
VaR htmltmp = div. innerhtml;
// IE is in upper case by default. If Firefox is supported, all script values will be replaced if it is not good enough. If it is only an IE application, you can log out of this line.
Htmltmp = htmltmp. Replace (/script/GI, "script ");
// Alert (htmltmp );
VaR pos_1 = 0;
VaR pos_2 = 0;
Pos_1 = htmltmp. indexof ("<SCRIPT>", pos_1 );
While (pos_1! =-1)
{
HTML + = htmltmp. substring (pos_2, pos_1 );
VaR pos_3 = htmltmp. indexof ("</scr" + "IPT>", pos_1 );
HTML + = htmltmp. substring (pos_1, pos_3 + "<-script>". Length );
Pos_2 = pos_1 + "<SCRIPT>". length;
Eval (htmltmp. substring (pos_2, pos_3 ));
Pos_2 = htmltmp. indexof ("<! -- Es --> ", pos_3 );
Pos_1 = htmltmp. indexof ("<SCRIPT>", pos_1 + 1 );
}
HTML + = htmltmp. substring (pos_2, htmltmp. Length );
Document. Write = oldwrite;
Document. writeln = oldwriteln;
}
Eval ("changediv ();");
Div. innerhtml = HTML;
}
Function Change ()
Function Change2 ()
</SCRIPT>
<Input type = "button" value = "change" onclick = "Change ();">
<Input type = "button" value = "Change2" onclick = "Change2 ();">
</Body>
</Html>
Steps:
1. Add <span style = "display: none"> hidden </span> to the first line of the div (if this is not done, ie will ignore the first JS)
2. Add <! -- Bs --> <! -- Es --> mark.
Principle:CodeI will tell you. If you have a better method, please contact us by email to discuss it together.
Supplement:
Function refreshdiv (Div)
{
VaR html = "";
If recursive calls are used in special applications, you can define the HTML here as a global variable to ensure that the last page is displayed during recursive refresh. (For example, If You Want To asynchronously load data in Ajax, it may be used when you specify to refresh the DIV in the callback function)
The following example shows a specific application: Ajax-based, personalized Web page construction prototype
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
