Javascript 在使用 replace with 时保留事件数据

Question

我试图在用 replaceWith（） 替换div 时保留事件数据。当我尝试它时，它找不到事件。目前我正在使用 postmessage 调用消息事件列表器，以用元素内的脚本替换潜水（用于未调用消息事件时）

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
    console.log('origin: ', e.origin);
    // Check if origin is proper
    if( e.origin != 'http://domain.com' || e.origin != 'http://www.domain.com'){ return }
    console.log('revieced message: ', e.data);
    player.Resume({ uuid: e.data.rid, title: e.data.rtitle });                      
    var script = document.createElement('script');
    script.text = "player.ready(function () { player.ima(adOptions);player.ima.requestAds(); window.SubtitlesOctopusOnLoad = function () { var options = { video: player.tech_.el_, subUrl: e.data.subtitleUrl || '<?php echo WEB_ROOT; ?>/files/<?php echo validation::safeOutputToScreen($file->subtitle); ?>', availableFonts: fonts, workerUrl: '<?php echo PLUGIN_WEB_ROOT; ?>/mediaplayer/assets/players/videojs/worker.js'};window.octopusInstance = new SubtitlesOctopus(options); window.octopusInstance.resize();}; if (SubtitlesOctopus) { SubtitlesOctopusOnLoad(); } });";
    $('#subtitles').replaceWith(script);                        
}, false);                                                                                  

script.text 包含我想保留在"e.data.subtitleUrl"中的数据

Answer 1

更新

我举了一个例子。你可以检查一下。

$('#click-div').click(function(e){
	var script = document.createElement('script');
  script.text = 'alert($("#added-script").data("subtitleUrl"));'
  script.dataset.subtitleUrl = 'Hold the data';
  script.setAttribute('id', 'added-script');
  $('#element-to-replace').replaceWith(script); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='click-div'>
  Click
</div>
<div id='element-to-replace'></div>

我已经将 id 添加到函数中创建script元素中。

您可以尝试data()方法来保留数据。

eventer(messageEvent,function(e) {
    console.log('origin: ', e.origin);
    // Check if origin is proper
    if( e.origin != 'http://domain.com' || e.origin != 'http://www.domain.com'){ return }
    console.log('revieced message: ', e.data);
    player.Resume({ uuid: e.data.rid, title: e.data.rtitle });                      
    var script = document.createElement('script');
    script.text = "player.ready(function () { player.ima(adOptions);player.ima.requestAds(); window.SubtitlesOctopusOnLoad = function () { var options = { video: player.tech_.el_, subUrl: $('#added-script').data('subtitle-url') || '<?php echo WEB_ROOT; ?>/files/<?php echo validation::safeOutputToScreen($file->subtitle); ?>', availableFonts: fonts, workerUrl: '<?php echo PLUGIN_WEB_ROOT; ?>/mediaplayer/assets/players/videojs/worker.js'};window.octopusInstance = new SubtitlesOctopus(options); window.octopusInstance.resize();}; if (SubtitlesOctopus) { SubtitlesOctopusOnLoad(); } });";
    script.dataset.subtitleUrl = e.data.subtitleUrl;
    script.setAttribute('id', 'added-script');
    $('#subtitles').replaceWith(script);                        
}, false);  

然后你可以通过$('#added-script').data('subtitle-url')获得字幕网址。