我有一个带有对象类型=“application/pdf”的div和两个选择标签，它们在更改时更改对象的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) {})
关于javascript - 如何在新的window.open上启动jquery并避免 "Uncaught ReferenceError: $ is not defined"错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52082481/