Javascript在iframe中更改值

时间:2012-05-29 16:21:03

标签: javascript html iframe javascript-events cross-domain

我有我的网站

www.aplicatii-iphone.ro

和另一个

page.html on localhost

<html>
<head>
<title>Object References across Iframes</title>

<script type="text/javascript">

window.onload = function(){
    var form = document.getElementById('testForm');
    form.testBtn.onclick = sendData;
}

function notify() {
    //alert('iframe loaded');
    var iframeEl = document.getElementById('ifrm');
    if ( iframeEl && iframeEl.parentNode && document.createElement ) {
        var newTxt = document.createTextNode('The iframe has loaded and your browser supports it\'s onload attribute.');
        var newPara = document.createElement("p");
        newPara.className = 'demo';
        newPara.appendChild(newTxt);
        iframeEl.parentNode.insertBefore(newPara, iframeEl);
    }
}

function sendData() { // to form inside iframed document
    // frames array method:
   // window.frames['ifrm'].document.forms['ifrmTest'].elements['display'].value = this.form.testEntry.value;
    var ifrm = document.getElementById('ifrm');
    var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    var form = doc.getElementById('search-input'); // <------<< search input
    form.display.value = this.form.testEntry.value;
    form.submit();
}

// test in iframed doc
var counter = 0;

</script>
</head>
<body>

<form id="testForm" action="#">
<p><input type="text" name="testEntry" size="30" value="[enter something]" /> <input name="testBtn" type="button" value="Click Me" /></p>
</form>

<iframe name="ifrm" id="ifrm" src="http://www.aplicatii-iphone.ro" onload="notify()" width="900">Sorry, your browser doesn't support iframes.</iframe>

</body>
</html>

每次按下按钮Click Me,我都希望www.aplicatii-iphone.ro的状态像用户一样从iframe外部搜索“testEntry”中写入的值。

我在那里尝试了一些东西......但是我不明白......任何帮助都可以吗?

我从这里http://www.dyn-web.com/tutorials/iframes/refs.php

采取了这个例子

2 个答案:

答案 0 :(得分:3)

如果您知道自己正在使用现代浏览器,则可以使用postMessage在帧之间进行通信。这是一篇很好的文章:http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessage

如果您需要支持旧版浏览器,可以使用Google Closure's CrossPageChannel对象在帧之间进行通信。

答案 1 :(得分:1)

不幸的是,由于Same orgin policy,这是不可能的 如果您尝试将子域与主域连接,则更改document.domain - 值只会有所帮助。

修改 如果您通过在同一网站上使用页面来避免相同的问题,这应该适合您:

window.frames['ifrm'].document.getElementById("search-input").value = document.getElementsByName("testEntry")[0].value;
window.frames['ifrm'].document.getElementById("cse-search-box").submit();