Question

我使用iframe组件加载通过props传递的跨源url。通过道具将iframe导航到新网址会将新条目推送到iframe的历史记录中，该历史记录会劫持浏览器的后退状态。按钮。每当src网址发生变化时，这就是跨源iframe的预期行为。

是否可以简单地创建一个新的iframe而不是更改src ？我的假设是，这将破坏iframe所具有的任何内部状态，从而阻止新的条目进入“后退”状态。按钮的历史。

iframe组件（改编自based on this answer）：

// ETA: using React.Component instead of 
// PureComponent yields the same back button behavior
const Iframe = class extends PureComponent {
    render() {
        return React.createElement('iframe', {
            ref: 'iframe',
            frameBorder: '0',
            src: this.props.url,
            sandbox: this.props.sandbox,
            referrerpolicy: 'no-referrer',
            target: '_parent',
            allowFullScreen: this.props.allowFullScreen || false,
            style: Object.assign(
                {},
                {
                    position: this.props.position || 'absolute',
                    display: this.props.display || 'block',
                    height: this.props.height || '100%',
                    width: this.props.width || '100%'
                },
                this.props.styles || {}
            ),
            height: this.props.height || '100%',
            width: this.props.width || '100%'
        });
    }
};

ETA：我假设创建新的基础iframe会阻止条目进入历史{{3}}，其中包含：

不要更改src，只需用新的iframe替换旧的iframe？没有历史陈述。功能相同。每个人都赢了。

 <!doctype html>

 <style> iframe {
     width: 300px;
     height:300px; } </style>

 <script> var urls = ["http://bing.com", "http://google.com",
 "http://duckduckgo.com"];

 function next() {
     if(urls.length==0) return;
    var original = document.getElementsByTagName("iframe")[0];
     var newFrame = document.createElement("iframe");
     newFrame.src = urls.pop();
     var parent = original.parentNode;
     parent.replaceChild(newFrame, original); } </script>

 <p>let's test some iframes</p> <button onclick="next()">next</button>
 <iframe />

Answer 1

在这种情况下，你应该使用Component而不是PureComponent，或者使用forceupdate方法。

PureComponent使用浅的prop和状态比较实现shouldComponentUpdate()，这导致您的组件无法重新渲染。

创建新的DOM节点而不是重新呈现

1 个答案: