Html 脚本标签内 - 无法识别宽度和高度

Html inside script tags - width and height not recognized

我正在使用脚本在我的网站上显示来自 Instagram 的图片。脚本本身工作正常,但我遇到了 html 代码的问题。

在脚本中,有一些 html 代码,这样当用户点击其中一张 Instagram 图片时,该 Instagram 页面会有一个 link 应该在新的弹出窗口中打开window。我希望弹出窗口 window 的宽度和高度为 500 像素。

使用下面的代码,每个 link 都在新选项卡中打开,而不是在新的弹出窗口中打开 window。我想问题是由 html 标签引起的。我想我应该转义内部标签,但显然这不是解决方案。

我在这里错过了什么?

<script type="text/javascript">
        var userFeed = new Instafeed1({
            get: 'user',
            userId: 'my_user_id',
            accessToken:'my_access_token',
            limit:'50',
            resolution:'low_resolution',
            template: '<div class="instafeed"><div class="instafeed-image"><a href="{{link}}" onclick="return !window.open(this.href, \'width=500, height=500\')" target="_blank"><img src="{{image}}" /></a><div class="instafeed-text"><a href="{{link}}" onclick="return !window.open(this.href, \'width=500, height=500\')" target="_blank"> {{likes}} {{comments}}</a></div></div></div>'
        });
        userFeed.run();
    </script>
    <div id="instafeed1"></div>

window.open() 接受 3 个参数:

window.open(strUrl, strWindowName, [strWindowFeatures]);

其中strUrl是新打开的window中要加载的url, strWindowName 是新 window 的字符串名称,strWindowFeatures 是一个可选参数,以字符串形式列出新 window 的功能。

您没有为 window 名称提供参数,因此使您的 window 功能成为新 window 的名称,而不是 window 功能。

要解决您的问题,只需在对 window.open():

的调用中添加一个参数即可
template: '<div class="instafeed"><div class="instafeed-image"><a href="{{link}}" onclick="return !window.open(this.href, \'COOL_WINDOW_NAME\',\'width=500, height=500\')" target="_blank"><img src="{{image}}" /></a><div class="instafeed-text"><a href="{{link}}" onclick="return !window.open(this.href, \'COOL_WINDOW_NAME\', \'width=500, height=500\')" target="_blank"> {{likes}} {{comments}}</a></div></div></div>'