javascript - Vue.js阻止iframe的功能

标签 javascript ruby-on-rails iframe vue.js

我一直遇到一个非常奇怪的问题,我需要在 vue 模板中有一个 iframe,然后稍后编辑这个 iframe。我已设法将其简化为以下代码:

<html>
  <body>
    <div id="app">
      <iframe id="testFrame" src="javascript:''" width="500" height="500">
      </iframe>
      <!-- This iframe is coming from the rails `yield` helper function. However this is the MCVE of our problem. -->
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
    <script>

var doc = document.getElementById('testFrame').contentWindow.document;
doc.open();
doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
doc.close();
new Vue({
  el: '#app'
});

    </script>
  </body>
</html>

但是生成的 iframe 显示在这里:

Current, incorrect iframe.

然而,所需的行为是让文本呈现如下所示:

enter image description here

是什么导致了这个问题,我该如何最好地解决它? (请注意,这是我正在处理的一个非常大的 Rails 应用程序的极简化版本最小完整可验证示例。)

最佳答案

你正在做的是 XSS。浏览器不允许这样做。

关于javascript - Vue.js阻止iframe的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40093559/

相关文章:

javascript - 过滤 Observable 数组

javascript - 检查元素中的类

javascript - 如何控制台数组中大写的日志元素

ruby-on-rails - 如何使用 Ruby on Rails 进行具有二值范围和作用域的查询?

ruby-on-rails - 在带有 Postgresql 后端的 Heroku 上的 Rails 应用程序中使用 COPY FROM

javascript - iframe再次加载失败

javascript - jQuery MultiSelect 库使用不正确的方法来处理 "Select All"?

jquery - rails 5 : form remote - trigger submit

jquery - 页面加载时滚动到顶部 (HTML)

javascript - 我可以在同一个页面上使用多个版本的 jQuery 吗?