Javascript更改iframe内的值答案

【问题标题】：Javascript changing values inside a iframeJavascript更改iframe内的值
【发布时间】：2021-04-01 16:16:59
【问题描述】：

我有我的网站

还有一个

本地主机上的page.html

<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这里举了一个例子

【问题讨论】：

标签： javascript html iframe dom-events cross-domain

【解决方案1】：

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

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

【讨论】：

好的，但是有一个小例子，当我有一个有很多标签的页面时，我必须使用 xpath 吗？因为我发现 id 很难达到“搜索输入”值...
非常感谢postMessage链接，点赞一次还不够！

【解决方案2】：

很遗憾，由于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();

【讨论】：

所以你说那是因为我的浏览器？我阅读了由于此“相同来源政策”而无法做到的文章。
我说那是因为你的浏览器吗？ :-D 你是对的，这是由于“同源策略”。
so 同源策略是 JavaScript 的一项安全功能，可防止访问来自不同域的文档的属性和方法。换句话说，如果包含文档和 iframed 文档不是来自同一个域，尝试引用彼此的对象将导致访问被拒绝或类似的错误消息。 ......是我的答案吗？
你看，我把它放在同一个域上，还是不行aplicatii-iphone.ro/iframe.html
@RowMinds 你可以看看的占位符 w3schools.com/html5/att_input_placeholder.asp 属性（是的，我知道，w3fools.com，但是 w3schools 就在这里，或者至少足够正确）。