無法使用innerHTML導入javascript代碼

我已經構建了一個基本上是帶有使用AJAX填充不同頁面的div的主頁的網頁。這基本上通過使用innerHTML將頁面加載到div中起作用。我碰到的一個問題是，當一個帶有JavaScript的頁面被加載到該div中時，所有其他代碼都可以正常運行;只是JavaScript不起作用。無法使用innerHTML導入javascript代碼

主網頁（的index.php）：

<html> 
<head> 
<script type="text/java"> 
////bunch of functions//// 
////Ends up that page_request on this instance is 'graph.php'//// 
document.getElementById('mydiv').innerHTML=page_request.responseText 
</script> 
</head> 
<body> 
<div id="mydiv"><div> 
</body> 
</html>

子頁（在DIV（graph.php加載））：

<html> 
<head> 
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" /> 
<script src="other_stuff.js"></script> 
</head> 
<body> 
<script> 
///bunch of script//// 
</script> 
</body> 
</html>

現在正在加載頁面本身時（開圖.php）我注意到一切正常，它只是當我通過innerHTML導入graph.php到index.php到我的div它不起作用（沒有錯誤只是沒有顯示）。我已經閱讀了許多其他的帖子和指南，並沒有提出任何直接的解決方案;認爲我所看到的是：

將eval（）在我的代碼[我在guide看到，這可能會導致惡意用戶的攻擊。
主頁上創建腳本，然後就使用導入數據：
- 使用document.createElement（）和.parentNode.insertBefore（）
創建一個監聽器和調用的函數，當我打開圖.PHP
而這種良好的example

即使我不是100％肯定這是如何的例子可以工作，因爲我有PHP的JavaScript來收集填充信息和然後在graph.php上繪製我的圖形;所以如果我把這個函數放到index.php中，PHP將會被加載，所以我不得不刷新頁面或者打電話給他們去更新信息。只是對於一些情況下，我很好，但我是新的和JavaScript的鬥爭，所以我不知道什麼解決方案將適合我的情況或工作最好。任何提示/例子將不勝感激，謝謝你的時間。

來源

2013-01-05 Devon Bernard

那麼首先第一件事情，你導入entir e頁面並將其放入div中，其中包括。你請求的頁面應該只有html應該在div中。 –

從你的代碼片段似乎你正在尋找在主頁面內嵌入完整的頁面。如果是這種情況，則更直接的方法是使用iframe元素。

例如：

... 
<div id="main-page-container"> 
    <iframe src="some-path/graph.php" scrolling="no" frameborder="no"></iframe> 
</div> 
...

參見reference and usage example。

來源

2013-01-05 22:35:05 Boaz

我已經閱讀了iframe vs div的一些爭論，所以我認爲只是去與div，因爲它更容易找到該文檔。但是如果我使用這種iframe技術來加載不同的頁面，那麼在將頁面上的所有代碼放入主頁面之前都會被解密？所以，如果我得到它的iframe打開一個頁面運行一切，然後導入;而div只是導入頁面代碼？如果我錯了，請糾正我。 –

在一個div裏面，你不能包含一個帶有html正文的整個頁面。 iframe就像在你的頁面中包含完全獨立的頁面。所以iframe中的javascript將會執行，但是在它自己的頁面中，不是你自己的頁面。 –

如果您的意思是Javascript代碼，那麼是的，它會在瀏覽器的客戶端自動加載，就像它在任何網頁上一樣。如果你的意思是PHP代碼，那麼它將在服務器端被執行，然後被提供給瀏覽器。 – Boaz

我會建議使用jQuery的函數。

到這裏看看：jQuery API

來源

2013-01-05 22:24:10 Nic

因此，對於此示例，我可以使用... $（'＃mydiv'）。load（'graph.php'）; 所有的java/php函數都會被放在graph.php頁面上;那麼所有的數據將被加載到mydiv？對不起，我不熟悉java;所以.load和.innerHTML的差異對我來說並不是很明顯;但是，謝謝，我會盡力使我的代碼運行。 –

是的，這應該工作。 PHP函數被執行以生成輸出，輸出被髮送到瀏覽器，jQuery將輸出加載到div中並執行JavaScript。 – Nic

舊的瀏覽器，如IE8及以下不允許你插入包含的JavaScript字符串並執行它，以任何形式。

就拿：

function addScriptText(js_code) { 
    var element = document.createElement("script"); 
    element.innerHTML = js_code; 
    document.head.appendChild(element); 
}

不會在IE8及以下工作。

您必須使用eval來實現：

function addScriptText(js_code) { 
    window.eval.call(window, js_code); 
}

否則，你需要動態地請求外部JS文件如：

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "externalScript.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

來源

2013-01-05 22:34:18

注意：您所加載的頁面（page2.html在這個例子中）必須在同一個域中的頁面正在加載它（在這個例子中page1.html）

工作液使用jQuery：

第1頁：

<!DOCTYPE html> 
<html> 
<head> 
<title>Page 1</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#page2").load("page2.html"); 
    }); 
</script> 
</head> 
<body> 
<h1>Page 1 Header</h1> 
<div id="page2"> 
</div> 
</body> 
</html>

第2頁：

<h2>Page 2 Header</h2> 

<script type="text/javascript"> 
    alert("Page 2 loaded and javascript executed!"); 
</script>

來源

2013-01-05 22:55:08

無法使用innerHTML導入javascript代碼

回答

相關問題