使iframe可编辑

Question

我正在为我的应用程序使用angularjs。我将从url（ng-src）加载到iframe的文本文件并在iframe中显示内容。但我想在加载的文本文件中进行一些更改，该文件被加载到iframe。 这是我的HTML代码。

<div style="padding-left: 0px;" class="col-sm-5 text-center">
    <iframe id="content" ng-src="{{$scope.files.url}}" width="100%" height="400" align="middle"></iframe>
</div>

这是我的angularjs部分，文件来源。

    $scope.files = {

    1 : {
        "id" : 1,
        "name" : "0066030.txt",
        "url" : "http://demo/textFiles/0066030.txt"
    },

    2 : {
        "id" : 2,
        "name" : "0101907.txt",
        "url" : "http://demo/textFiles/0101907.txt"
    },
    3 : {
        "id" : 3,
        "name" : "0124757.txt",
        "url" : "http://demo/textFiles/0124757.txt"
    }
};

我正在成功加载文本文件内容。任何人都可以帮助我使它可编辑。 如果有任何其他HTML标签（例如：textarea，..等）用于使用ng-src属性加载文本文件，那也没关系。

Answer 1

<iframe>元素的编辑受Same Origin Policy限制。这是为了防止恶意网站欺骗使用跨域内容的用户。

对于可以无限制地编辑的<iframe>元素：

<iframe src='about:blank'>
</iframe>

这意味着需要下载内容并使用DOM操作技术构建<iframe>元素。

  

同源政策

     

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源交互。它是隔离潜在恶意文档的关键安全机制。

     

— MDN Developer Reference - Same Origin Policy

  

<iframe>属性

     

  
• 的 SRC   要嵌入的页面的URL。对符合Same-Origin Policy的空页使用'about:blank'。
  

     

— MDN HTML Reference - <iframe>