Question

我正在使用Pinpoint预订系统插件在Wordpress网站上工作。我想使用javascript自动填写预订。以this demo为例。从浏览器检查元素，名字的标识为DOPBSPCalendar-form-field1_1。所以我将此代码放在地址栏上以尝试设置文本。

javascript:document.getElementById('DOPBSPCalendar-form-field1_1').value='first';

一个空白页，其中包含＆＃34; first＆＃34;被展示。怎么解决这个问题？

Answer 1

它无效的原因是因为表单位于iframe（ajax: { ... data: function (params) { var query = { term: params.term || $('#CurrencyID').select2('data')[0].text } }，id = calendar-demo）内。该页面不允许您从地址栏中定位iframe内的元素。

您可以输入此行，该行将显示“IFRAME”并确认iframe存在：

class = example-demo-iframe

但任何在iframe中定位元素的尝试都将失败。例如，尝试运行此行：

javascript:alert(document.getElementById('calendar-demo').tagName);

将返回一个空白的弹出窗口。

<强>更新

要回答您编辑的问题，请将您的语句包装在函数调用（或javascript:alert(document.getElementById('calendar-demo').innerHTML);）中，以防止返回值更改整个页面。

你可以这样做：

void()

或者这个：

javascript:(function(){document.getElementById('DOPBSPCalendar-form-field1_1').value='first';})();

Answer 2

如果指向另一个域，浏览器跨源安全策略将不允许您访问iFrame的内容。

但是，有window.postMessage方法，可以将序列化数据发送到这样的iFrame。

otherWindow.postMessage('{greetings: "Hello iFrame content"}', '*');

然后，您可以在iframe内运行的内容中设置事件处理程序并获取此数据。

window.addEventListener("message", function(data){
    console.log(data);
}, false);

现在，如果你在iFrame中做同样的事情（发送消息）作为对你正在寻找的数据的回复，事情会变得有趣。

在这两个窗口之间使用您自己的小型数据通信协议将为您提供很多可能做任何事情的可能性。

但请记住，只有您可以控制在iFrame和父窗口内运行的内容时，才有可能。

自动填充HTML表单返回空白页面

2 个答案: