使 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> 属性

• 源代码 要嵌入的页面的 URL。对符合同源策略的空白页面使用 'about:blank'。

— MDN HTML Reference - <iframe>