在 Knockout js 中动态 URL 绑定到 iframe

Posted 2023-02-27

【中文标题】在 Knockout js 中动态 URL 绑定到 iframe

【英文标题】：Dynamic URL binding to iframe in Knockout js

【发布时间】：2019-03-11 01:48:58

【问题描述】：

我在运行时将 src 属性绑定到 iframe 时遇到问题。

iframe data-bind="visible: $root.someBoolProp(), attr:src:$root.someProp" /iframe

当我执行 console.log($root.someProp) 时，它正在记录正确的 URL。(https://dev-payment....)

我不确定渲染视图后是否会抛出以下错误，其中 localhost url 附加到实际 iframe URL。

错误信息：

拒绝在框架中显示“http://localhost:62489/en/hoapayment/%22https://dev-payment-ui.azurewebsites.net/something%22”，因为它将“X-Frame-Options”设置为“拒绝”。

有人可以告诉我如何解决这个问题。

【问题讨论】：

会不会是someProp 持有一个没有指定协议的url？见this answer。

someProp 也包含该协议。当我执行console.log() 时，我会看到完整的 URL 以及协议。

这取决于您在哪里执行 console.log() 与您实际使用它的位置。看起来 url 被设置为相对的（您的网站 url + 来自 root.someProp 的 url）。另外，尝试 $root.someProp() 最后加上括号。

我还想在这里补充一点：当我尝试将 URL 直接传递给 iframe SRC 时，我可以看到 iframe 中的页面加载。 console.log('Payment URL: ',paymentUrl); frame.attr('src', 'https://dev-payment-ui.azurewebsites.net....'); ...但是当我将变量传递给 SRC 时，我收到了上述错误 console.log('Payment URL: ',paymentUrl); frame.attr('src', paymentUrl);

【参考方案1】：

问题在于 URL 格式。作为paymentUrl 一部分的URL 类似于""https://dev-payment...""。所以我必须删除多余的"。

感谢您的回答。