如何以编程方式触发“保存网站”事件

Question

当我偶然发现关于如何保存网站的这个问题时，我想知道是否有任何方法可以触发典型的

CTRL

+

“保存”事件以编程方式仅保存当前网页。有什么方法可以直接从浏览器触发此事件（例如单击按钮）？或者这仅限于用户操作并受到浏览器的限制？我认为出于安全原因，此类操作受到限制 - 如果是这种情况，是否有任何解决方法？实现这些事情的常用方法是什么？这可能包括按 e 等操作。 G。

F11

全屏。

Answer 1

没有用于调用浏览器的保存当前网页对话框的 DOM/JS API。
...但是有 is 用于保存网页的 Chrome 扩展 API。
...但是如果用户安装了扩展程序，则扩展程序的脚本 - 甚至是扩展程序感知页内脚本可以尝试与扩展程序通信以指示它触发保存页面对话框。
...或者 JS 可以尝试通过从当前 DOM 重新构建 HTML 来保存页面，将其作为字符串值保存在传递给 URL.createObjectURL 的 Blob 中，然后打开下载提示，如下所示：

function promptToSaveCurrentReconstitutedWebPage() {

    const htmlEl  = document.documentElement; // i.e. the root <html> element.
    const html    = htmlEl.outerHTML; // https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
    
    const blob    = new Blob( [ html ], { type: "text/html" } );
    const blobUri = URL.createObjectURL( blob );
    
    const a       = document.createElement( 'a' );
    a.href     = blobUri;
    a.download = 'ThisPage.html';

    document.body.appendChild( a );
    a.click();
}

不幸的是，我无法使用 StackOverflow 代码片段来演示这一点，因为应用了额外的安全/沙箱（即下面的代码片段不起作用：

blobUri

将采用

blob:null/{guid}

的形式，这意味着它是一个沙盒 blob ，但这应该适用于更广泛的网络，包括作为书签。

function promptToSaveCurrentReconstitutedWebPage() {

    const htmlEl  = document.documentElement; // i.e. the root <html> element.
    const html    = htmlEl.outerHTML; // https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
    
    const blob    = new Blob( [ html ], { type: "text/html" } );
    const blobUri = URL.createObjectURL( blob );
    
    const a       = document.createElement( 'a' );
    a.href     = blobUri;
    a.download = 'ThisPage.html';

    document.body.appendChild( a );
    a.click();
}

<button type="button" onclick="promptToSaveCurrentReconstitutedWebPage()">Click here to save this web-page</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat nunc risus, eu euismod ligula sagittis id. Nullam pretium congue dolor ac volutpat. Pellentesque imperdiet mi dapibus purus pharetra, quis egestas felis tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc ac efficitur lectus. Cras sed magna quam. Etiam finibus urna nec urna accumsan imperdiet. Proin dignissim, velit sit amet ornare vehicula, ipsum nibh pulvinar tellus, nec dignissim erat odio id neque. In massa neque, porta eu diam ac, hendrerit condimentum dui. Sed cursus mattis auctor. Morbi id ligula sit amet dui molestie interdum. Quisque sit amet libero sodales, molestie felis ac, tincidunt lectus.</p>

<p>Pellentesque condimentum sem velit, in tincidunt quam mattis vel. Nulla sagittis nisl nec erat tristique sodales. Quisque in neque mollis, varius sapien sed, interdum felis. Aenean at fermentum turpis, ut elementum enim. Vestibulum egestas faucibus consequat. Donec lacinia ex quis quam lacinia vehicula. Vestibulum posuere tortor quis finibus viverra. Vestibulum congue sagittis lorem, eget laoreet diam egestas et.</p>

<p>Integer sit amet odio ligula. Nulla congue viverra ultricies. Donec maximus enim ornare, molestie orci non, gravida ex. Nullam semper vestibulum nulla, quis laoreet felis ornare sed. Praesent aliquet libero vitae velit elementum, vitae pulvinar leo pulvinar. Donec consequat neque ut ipsum ornare ullamcorper. Cras sit amet porta augue. Vestibulum nibh velit, laoreet quis sagittis euismod, consectetur a arcu. Curabitur pharetra, odio in consequat accumsan, purus velit tristique justo, in hendrerit purus ligula vitae magna. Vestibulum vitae scelerisque ligula. Morbi aliquam molestie ex sit amet tincidunt. Pellentesque magna est, tincidunt in est sed, facilisis egestas nibh. Donec malesuada, metus vitae finibus feugiat, leo massa cursus erat, vitae tempor augue sapien vel augue. Praesent vitae urna nulla.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla quam at ex molestie aliquet. Duis ornare neque ac dolor convallis eleifend. Duis ullamcorper est in nunc consequat, vitae elementum massa lacinia. Mauris mollis massa eget mauris molestie egestas vitae sed nisi. Praesent sit amet eros sollicitudin purus imperdiet congue eget vehicula enim. Fusce lacinia, elit ut vulputate feugiat, dui mauris imperdiet dui, quis sagittis turpis lacus vel lorem. Nam malesuada ultricies massa consequat fringilla. Donec in elit ac arcu placerat aliquet eu eu felis. Nullam dictum dui quis velit accumsan ornare.</p>

<p>Fusce hendrerit pretium lectus, eu vehicula est tristique sit amet. Aenean nec magna id velit pellentesque accumsan. Pellentesque eget maximus tellus, id bibendum lectus. Phasellus vitae elementum velit, vitae finibus nisi. Maecenas faucibus efficitur felis. Curabitur viverra tortor urna, efficitur volutpat tellus fermentum sit amet. Morbi non cursus mauris. Suspendisse porta libero sit amet est tincidunt iaculis. Aliquam et ullamcorper ipsum. Donec sit amet gravida ligula. Nam nec lobortis mi. Integer imperdiet nunc ut gravida malesuada. Praesent porta sem in erat vestibulum, ac commodo erat vulputate. Nunc cursus mauris eu nisl scelerisque, eget rhoncus arcu vehicula.</p>

如何以编程方式触发“保存网站”事件

问题描述投票：0回答：1

1个回答

最新问题

如何以编程方式触发“保存网站”事件

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1