當前代碼中iframe的div內無法訪問的元素

我有2個HTML文件，分別是a.html和b.html，其中一個js文件即do.js。當前代碼中iframe的div內無法訪問的元素

下面是每個每個文件的內容：

a.html：

<head> 
    <script src="do.js" type="text/javascript"></script> 
</head> 
<body> 
    <button onClick = "doWork();">click me</button> 
    <iframe src = "b.html" id = "previewFrame"></iframe> 
</body>

b.html（相關部分）：

<div id = "container"></div>

做。 js：

function doWork(){ 
var div = $('#previewFrame').contents().find('#container'); 
div.html("<input type = 'text' id = 'testElem' value = '12'><script>alert(document.getElementById('testElem').value);</script>"); 
}

當我運行上面的代碼時，iframe的內容被替換爲文本框，但是警報失敗。

我收到一個「類型錯誤」，指出document.getElementById ...爲空。

任何人都可以告訴我在上面的代碼中缺少什麼？

來源

2013-07-15 user2583438

嘗試爲「輸入」添加結束標記，在這種情況下，它應該是自閉標記。 – Teemu

直接使用'＃previewFrame'和'＃testElem'訪問'testElem'。 – DevlshOne

@Stano JS被執行，但它觸發一個錯誤，告訴剛創建的'＃testElem'不存在，而不是提醒'12'。 – Teemu

要調用使用document JavaScript的功能，但這個目標是從父文件，而不是iframe的文檔，請嘗試使用：

function doWork(){ 
var a = $('#previewFrame').contents().find('body'); 
a.html("<input type = 'text' id = 'testElem' value = '12'><sc"+"ript>alert($('#previewFrame').contents()[0].getElementById('testElem').value);</scr"+"ipt>"); 
}

見演示here。

來源

2013-07-15 12:49:44

@Teemu我用這段代碼上傳了一個演示... –

我不確定這是爲什麼OP得到錯誤，但你的小提琴代碼似乎很好用：）。看起來像混淆'腳本'標記是答案的重要組成部分，也許你也可以將它添加到答案。 – Teemu

@JonathanNaguin，感謝您的演示，這真的有所幫助，但是我的情況是，我不允許觸摸正在添加到b.html中的「內容」。基本上我無法觸及警報代碼.... – user2583438

當前代碼中iframe的div內無法訪問的元素

回答

相關問題