问题：view模板中无法执行javascript
emonduora opened this issue · comments
描述问题：
我想做个简单的bpmn流程设计，但模板中的<script></script>中的内容都不会被执行，具体内容如下：
1、建立一个bpmn.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Bpmn</title>
<!-- required modeler styles -->
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@17.5.0/dist/assets/bpmn-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@17.5.0/dist/assets/diagram-js.css">
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@17.5.0/dist/assets/bpmn-font/css/bpmn.css">
<!-- modeler distro -->
<script src="https://unpkg.com/bpmn-js@17.5.0/dist/bpmn-modeler.development.js"></script>
<!-- needed for this example only -->
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<!-- example styles -->
<style>
html, body, #canvas {
height: 100%;
padding: 0;
margin: 0;
}
.diagram-note {
background-color: rgba(66, 180, 21, 0.7);
color: White;
border-radius: 5px;
font-family: Arial;
font-size: 12px;
padding: 5px;
min-height: 16px;
width: 50px;
text-align: center;
}
.needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
}
#save-button {
position: fixed;
bottom: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="canvas"></div>
<button id="save-button">export</button>
<script>
const diagramUrl = 'https://cdn.statically.io/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
// modeler instance
const bpmnModeler = new BpmnJS({
container: '#canvas',
keyboard: {
bindTo: window
}
});
/**
* Save diagram contents and print them to the console.
*/
async function exportDiagram() {
try {
var result = await bpmnModeler.saveXML({ format: true });
alert('Diagram exported. Check the developer tools!');
console.log('DIAGRAM', result.xml);
} catch (err) {
console.error('could not save BPMN 2.0 diagram', err);
}
}
/**
* Open diagram in our modeler instance.
*
* @param {String} bpmnXML diagram to display
*/
async function openDiagram(bpmnXML) {
// import diagram
try {
await bpmnModeler.importXML(bpmnXML);
// access modeler components
var canvas = bpmnModeler.get('canvas');
var overlays = bpmnModeler.get('overlays');
// zoom to fit full viewport
canvas.zoom('fit-viewport');
// attach an overlay to a node
overlays.add('SCAN_OK', 'note', {
position: {
bottom: 0,
right: 0
},
html: '<div class="diagram-note">Mixed up the labels?</div>'
});
// add marker
canvas.addMarker('SCAN_OK', 'needs-discussion');
} catch (err) {
console.error('could not import BPMN 2.0 diagram', err);
}
}
// load external diagram file via AJAX and open it
$.get(diagramUrl, openDiagram, 'text');
// wire save button
$('#save-button').click(exportDiagram);
</script>
<!--
Thanks for trying out our BPMN toolkit!
This example uses the pre-built distribution of the bpmn-js modeler.
Consider rolling your own distribution to have more flexibility
regarding which features to include.
Checkout our advanced examples section to learn more:
* https://github.com/bpmn-io/bpmn-js-examples#advanced
To get a bit broader overview over how bpmn-js works,
follow our walkthrough:
* https://bpmn.io/toolkit/bpmn-js/walkthrough/
Related starters:
* https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/starter/viewer.html
-->
</body>
</html>
2、创建路由 web.php
Route::get('/', fn() => \Slowlyo\OwlAdmin\Admin::view());
Route::get('/bpmn', function () { return view('bpmn'); });
3、访问这个url，正常显示
4、现在将这个路由移至admin中的route.php
Route::group([
'domain' => config('admin.route.domain'),
'prefix' => config('admin.route.prefix'),
'middleware' => config('admin.route.middleware'),
], function (Router $router) {
$router->resource('dashboard', \App\Admin\Controllers\HomeController::class);
$router->resource('system/settings', \App\Admin\Controllers\SettingController::class);
$router->get('/bpmn', function () { return view('bpmn'); });
});
5、创建测试菜单
6、测试
只有最下面的export按钮能显示出来
7、最后测试
只要在view模板中加入javascript脚本，这些脚本都不会执行
owl-admin 版本 最新版3.5
amis 渲染只能处理静态内容, 页面中的 js 不会被执行, 可以考虑用 iframe 实现, 或者想办法把 js 放到 bootstrap.php 中
谢谢，iframe 这样做不行，全是空白，放到bootstrap.php中不知道怎么做
<!DOCTYPE html>
<html lang="zh_CN">
<body>
<iframe src= 'http://localhost/bpmn' style="border: none;width: 1200px;height: 600px" ></iframe>
</body>
</html>
菜单里面可以直接放地址的
这是对laravel的严重阉割了，太麻烦了
这是对laravel的严重阉割了，太麻烦了
这是个前后端分离的项目😅
我查文档有这样的说法
AMIS 提供了一个专门的 script 组件，允许你在页面上嵌入并执行 JavaScript。例如：
json
{
"body": [
{
"type": "script",
"src": "path/to/your/script.js"
}
]
}
或者
{
"body": [
{
"type": "script",
"inline": "console.log('Hello, AMIS!');"
}
]
}
但执行后
没看到有这样的文档