javascript - 如何在新的 window.open 上启动 jquery 并避免“Uncaught ReferenceError: $ is not defined”错误?
问题描述
我有一个带有 object type="application/pdf" 的 div 和两个 select 标签,它们在更改时更改对象的 src。另外,还有一个图标可以打开一个包含此内容的新窗口(对象 + html 选择标签):
<div id="navegador_pdfs">
<div id="btn_toggle_pdf_navigator">
<a href="#" onclick="destacar();"><?php echo $this->Bootstrap->glyphicon('new-window'); ?></a>
</div>
<div style="position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.75); color: #FFF; text-align: center;">
Pasta Digital
<?php
echo $this->Form->select('linhas',
[ 'Documentos: ' => $documentos, ' Ou: ' => [ '' => 'Ver Todos' ] ],
['default' => $documento_id,
'class' => 'form-control truncated',
'onchange' => " if( $.isNumeric($(this).val()) ) { "
. "$('#myPdf').attr('data', '" . $this->Url->build([ "controller" => "binario", "action" => "visualizar"]) . "/'+$(this).val()); "
. "} else { "
. "$('#myPdf').attr('data', '" . $this->Url->build([ "controller" => "binario", "action" => "ver-todos", "?" => [ 'numero_processo' => $numero_processo ]]) . "'); "
. "} "]);
?>
</div>
<div style="position: absolute; bottom: 0; right: 15px; background-color: rgba(0, 0, 0, 0.75); color: #FFF; text-align: center;">
Pasta Digital Externa
<?php
echo $this->Form->select('linhas',
[ 'Documentos: ' => $documentosExternos, ' Ou: ' => [ '' => 'Ver Todos' ] ],
['class' => 'form-control truncated',
'onchange' => " if( $(this).val() != '' ) { "
. "$('#myPdf').attr('data', '" . $this->Url->build([ "controller" => "solicitacao", "action" => "downloadDocumentoTj"]) . "/'+$(this).val()); "
. "} else { "
. "$('#myPdf').attr('data', '" . $this->Url->build([ "controller" => "solicitacao", "action" => "baixarTodosDocumentos", $cnj ]) . "'); "
. "} "
]);
?>
</div>
<object id="myPdf" type="application/pdf" data="<?php echo ($documento_id > 0 ) ? $this->Url->build([ "controller" => "binario", "action" => "visualizar", $documento_id]) : "" ; ?>" width="100%" height="100%"></object>
</div>
以及在新窗口中打开此内容的脚本:
function destacar(){
const leftpos = screen.width / 2;
const toppos = 0;
var params = 'width='+ (screen.width/2);
params += ', height='+ (screen.height/1.2);
params += ', top='+toppos+', left='+leftpos;
params += ', fullscreen=yes';
var divText = '<html><head>';
divText += '<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">';
divText += '<link rel="stylesheet" type="text/css" href="/css/theme.css">';
divText += '</head><body style="padding: 0px 5px;">';
var myWindow = window.open('','',params);
var doc = myWindow.document;
doc.open();
doc.write(divText);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/jquery.min.js';
$(doc.head).append(script);
doc.write(document.getElementById("navegador_pdfs").outerHTML);
doc.close();
$('#form_novo_despacho').removeClass('col-md-6');
$('#form_novo_despacho').addClass('col-md-12');
$('#navegador_pdfs').hide();
myWindow.onunload = function(){
$('#form_novo_despacho').removeClass('col-md-12');
$('#form_novo_despacho').addClass('col-md-6');
$('#navegador_pdfs').show();
};
}
然后,当我在打开的窗口上更改任何选择标签的值时,可能会在控制台上看到错误:
Uncaught ReferenceError: $ is not defined
at HTMLSelectElement.onchange (VM1774 nova:1)
我想那是 jQuery 没有在这个最近打开的新窗口上初始化。有没有办法初始化 jQuery 或者只是我缺少的另一件事?
谢谢!
解决方案
不要安装使用:
$(doc.head).append(script);
利用:
document.querySelector('head').appendChild(script);
或者
document.head.appendChild(script);
您正在尝试使用jQuery
安装jQuery
.
您可能还希望将依赖代码添加到脚本的 onload 事件中。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
script.onload = function() {
$('#form_novo_despacho').removeClass('col-md-6');
$('#form_novo_despacho').addClass('col-md-12');
$('#navegador_pdfs').hide();
myWindow.onunload = function(){
$('#form_novo_despacho').removeClass('col-md-12');
$('#form_novo_despacho').addClass('col-md-6');
$('#navegador_pdfs').show();
};
}
或者
script.addEventListener("load", function(event) {})
推荐阅读
- mallet - 潜在狄利克雷分配和使用 MALLET 分析两个数据集
- intellij-idea - 在 IntelliJ WebStorm 中添加编辑器样式
- javascript - 按文本输入过滤,如何添加正则表达式?-香草JS
- node.js - 在nodejs中的Firebase Functions HTTPS请求中报告错误的正确方法
- firebase - 如何在 Firestore 中为 Flutter 应用查询最近的地理点?
- ios - iOS 14 应用程序开发:如何避免应用程序删除警报出现空字符串(删除/移动到应用程序库的警报)?
- json - 颤振 | 为什么我的 json 文件在我尝试访问它时会转换为 firebase 上的文件夹?
- android - Android.Clean Arch。将数据从域发送到数据层
- python - 如何在 Tkinter 中访问超出窗口大小的条目
- javascript - 在 Javascript 中运行 PHP