简体   繁体   English

如何在Chrome打包的应用中将HTML加载到iframe中

[英]How to load HTML into iframe in a Chrome packaged app

I am trying to make a chrome packaged app to allow a file to save itself back to disk. 我正在尝试制作一个chrome打包的应用程序,以允许文件将自身保存回磁盘。 I am planning to open the file using chrome.fileSystem.chooseEntry() . 我打算使用chrome.fileSystem.chooseEntry()打开文件。 Then I have to load it into an iframe with the sandbox attribute set. 然后,我必须将其加载到设置了沙盒属性的iframe中。 It will use document event listenders ( document.createEvent ) to wait for the client file to send its updated file content, and then save it back to the file system. 它将使用文档事件侦听器( document.createEvent )等待客户端文件发送其更新的文件内容,然后将其保存回文件系统。

So there are two things I need to do, and the first one I have been able to find very little information on inside a Chrome packaged app, where you can't use document.write. 因此,我需要做两件事,第一件事是我无法在Chrome打包的应用程序中找到很少的信息,而您无法在其中使用document.write。 I can't use body.innerHTML because it is a full HTML document with a head element. 我不能使用body.innerHTML因为它是带有head元素的完整HTML文档。

  1. I want to load the file into the iframe to run it. 我想将文件加载到iframe中以运行它。 The file may be several MBs. 该文件可能是几个MB。 Can a data url handle something this big? 数据网址可以处理这么大的事情吗? Do I put in in the src? 我要输入src吗? Or do I put that somewhere else and set the src to javascript:void(0); 还是将其放在其他位置,并将src设置为javascript:void(0); ?
  2. I want to inject an element into the iframe DOM and listen for events on that element. 我想将一个元素注入到iframe DOM中,并监听该元素上的事件。 This actually looks like I might be able to copy it over from the implementation for Firefox that we already have. 实际上,看起来我可以从已有的Firefox实现中复制它。

Here's the code I have to open it, copied from the chrome.fileSystem page. 这是我必须打开的代码,该代码是从chrome.fileSystem页面复制的。

chrome.fileSystem.chooseEntry(
    {
        type: 'openFile', 
        accepts:[{
            extensions: ['html']
        }] 
    }, 
    function(fileEntry) {
        if (!fileEntry) {
            return;
        }
        console.log(fileEntry);
        fileEntry.file(function(file) {
            console.log(file);
            var reader = new FileReader();
            reader.onload = function(e) {
                console.log(e); 
                //set iframe contentDocument
            };
            reader.readAsText(file);
        });
    }
);

This is the iframe. 这是iframe。

<iframe id="test" sandbox="allow-scripts allow-popups allow-forms allow-same-origin" seamless="seamless"></iframe>

I ended up using a webview . 我最终使用了webview And I really like it, because it acts like a totally normal browser window, except for the context menu. 我非常喜欢它,因为除了上下文菜单外,它的行为就像一个完全普通的浏览器窗口。 But all the behind the scenes stuff seems normal, except for alert, prompt, and confirm, which you have to implement yourself in the parent window, and the fact that you have to use events to allow it to access almost anything external, except maybe ajax requests. 但是所有幕后的东西似乎都是正常的,除了警报,提示和确认(您必须在父窗口中实现自己),以及必须使用事件允许它访问几乎所有外部内容的事实,也许ajax请求。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM